Introducción

Introducción >

Introducción

 Return to chapter overview

Esta ayuda en línea quiere ser una ayuda operativa para quienes deseen empezar a trabajar enseguida con WebSite X5 para crear su sitio web, blog o tienda de comercio electrónico.

Siguiendo paso a paso el recorrido sugerido, se ofrece una descripción exacta de la interfaz del programa, ilustrando todos los comandos y las opciones presentes en los menús, en los paneles y en las ventanas.

Las explicaciones y las profundizaciones aquí propuestas, junto a la intuitiva lógica de trabajo y a la disponibilidad de las numerosas vistas previas actualizadas en tiempo real, permitirán a cualquier usuario trabajar de modo óptimo con WebSite X5 y obtener sitios web atractivos, interesantes y profesionales.

Esta guía de WebSite X5 se refiere a la versión Evolution v. 10 pero, teniendo en cuenta las limitaciones específicas de cada una de ellas, puede resultar útil su consulta también para trabajar con otras versiones del programa.

La guía está organizada en las siguientes secciones:

- | El ámbito de trabajo Aparecen ilustradas todas las funciones puestas a disposición por el programa, en las distintas ventanas que se presentan durante la creación y publicación de un sitio web.
- | Best practice: Propone útiles tutoriales que simulan algunos procedimientos para resolver tareas específicas como la creación de un formulario para la recogida de datos o la configuración de un área reservada protegida con contraseña.
- | Profundización: Ofrece fichas para profundizar en varios temas vinculados a la creación de un sitio web.

Última actualizacón: versión 10


Presentación de WebSite X5

Introducción >

Presentación de WebSite X5

 Return to chapter overview

Cree sitios web, tiendas online y blogs en 5 pasos

WebSite X5 es el software ideal para crear los sitios Web que siempre has deseado tener. No requiere ningún conocimiento sobre programación y permite trabajar de modo completamente visual mediante una interfaz intuitiva y rica de numerosas vistas previas, actualizadas en tiempo real.

De este modo, WebSite X5 ayuda hasta la publicación del Sitio, garantizando simplicidad de uso, flexibilidad y amplios espacios de personalización.

En función de las elecciones efectuadas y a las predisposiciones definidas, WebSite X5 genera en automático el código de las Páginas en HTML5 + CSS 2.1 o 3 garantizando, así, plena compatibilidad con todas los exploradores de internet y los dispositivos móviles, además de una correcta indexación por parte de los Motores de búsqueda.

Herramientas web profesionales

Aún siendo muy fácil de usar, WebSite X5 pone a disposición una amplia gama de herramientas profesionales para:

§Tiendas online con tarjeta de crédito

§Blogs con Podcast y Videocast

§Motor de búsqueda interno

§Formularios de correo electrónico con filtros anti-spam

§Noticias y fuentes RSS

§Zoom e imágenes panorámicas

§Galerías de imágenes y vídeo

§Gestión de accesos

§Gestión de banners publicitarios

§Creación de sitios multi-idioma

Una solutión todo en uno

Además WebSite X5 permite ahorrar tiempo y esfuerzo incluyendo ya todo lo necesario para la creación de un sitio web:

§Editor de plantillas

§Editor de imágenes

§Generador de menús

§Motor FTP interno

§1.500 plantillas personalizables

§6.000 imágenes de libre distribución

§Librerías de botones

§Colección de widgets

Esta mezcla de facilidad de uso y numerosas y completas prestaciones es el motivo del éxito de WebSite X5: el programa perfecto para quien quiere crear sitios web.


WebSite X5: ¿Qué es lo que hace?

Incomedia WebSite X5: ¿Qué es lo que hace?

Introducción >

Incomedia WebSite X5: ¿Qué es lo que hace?

 Return to chapter overview

Incomedia WebSite X5 permite crear de forma simple y rápida sitios web, carritos de la compra de comercio electrónico, blogs, álbumes fotográficos digitales o presentaciones interactivas. Los Proyectos se pueden desarrollar siguiendo una estructura en red y es posible articularlos a través de menús por niveles: de esta manera, el número de páginas que se pueden insertar se hace infinito.

El usuario puede establecer en cada una de las páginas la disposición de cada uno de los objetos que el programa ofrece, tales como: Texto, imágenes, tablas, galerías, vídeos, audios, formularios de envío de emails, redes sociales, libro de visitas, mapas, animaciones Flash™, lista de productos y objetos HTML y widgets.

WebSite X5 presenta una gran variedad de interesantes funciones para la edición de imágenes, que hacen innecesario recurrir a programas de edición gráfica externos. Gracias al guardado automático de las imágenes en formato comprimido, el usuario no se tiene siquiera que preocupar de preparar las fotos antes de insertarlas.

El amplio archivo de plantillas gráficas, el editor interno para la creación de botones tridimensionales, las amplias posibilidades de personalización gráfica, la introducción de una intro, la configuración de la elección de los idiomas de consulta, la creación de un área de acceso reservado mediante contraseña, la posibilidad de crear y administrar blogs, fuentes RSS y tiendas en línea habilitadas para el pago con tarjeta de crédito, permiten enriquecer el sitio web haciéndolo completo y profesional.

Y para finalizar, WebSite X5 le permite publicar directamente su sitio web en internet sin tener que recurrir a programas externos de FTP (Protocolo de Transferencia de Archivos).

Trabajar con WebSite X5

WebSite X5 opera con un asistente (wizard), es decir una guía visual que acompaña paso a paso en la creación de un sitio web completo, funcional y gráficamente atractivo.

Los pasos que llevan de la idea original al sitio web publicado son solamente 5:

1. Ajustes generales

Luego de haber especificado el proyecto a desarrollar y de haber introducido alguna información general, tal como la descripción y las palabras clave para que sean indexadas por los motores de búsqueda, WebSite X5 le permite definir el diseño gráfico de su sitio web. Es posible escoger entre más de 1.500 plantillas predefinidas o dar rienda suelta a la creatividad creando una plantilla propia desde cero. Gracias al editor interno incluido, el encabezamiento y el pie de página de las plantillas pueden ser libremente personalizados.

2. Creación del mapa

Comenzando con la página de inicio, WebSite X5 da la posibilidad de definir la estructura en árbol del sitio web. Se pueden configurar todos los niveles de profundización necesarios para organizar un número ilimitado de páginas. En función del mapa se creará dinámicamente el menú de navegación. El mapa podrá ser modificado en cualquier momento para poder efectuar fácilmente la actualización del sitio web.

3. Creación de páginas

La creación y la disposición de cada página se consigue con solo arrastrar y situar los objetos disponibles: Textos, Tablas, Imágenes, Animaciones, Vídeos y Audios, Galerías, Formularios para la recogida de datos y el envío de correo electrónico, Redes Sociales, Libro de Visitas, Mapa, Lista de Productos, Código HTML y Widgets. Los objetos importados pueden ser personalizados y completados con la inserción de enlaces a recursos tanto internos como externos. Gracias al editor gráfico incorporado es posible girar, corregir o aplicar filtros, máscaras y marcos a todas las imágenes añadidas sin la necesidad de recurrir a programas externos.

4. Ajustes avanzados

Para completar la personalización del sitio web, es posible proceder a la definición del Estilo de elementos como los menús de navegación, los textos, la ventana ShowBox y los correos electrónicos. Gracias al editor interno incluido, es posible proceder a la creación de botones tridimensionales para los que se puede aplicar el efecto "al paso del puntero del ratón" (efecto mouseover). Además, se puede completar el sitio web con herramientas como: Página de Bienvenida con banda sonora y selección del idioma de consulta, áreas reservadas con gestión del acceso y de los usuarios, mensajes publicitarios, fuentes RSS, blogs y carrito de la compra.

5. Exportar

WebSite X5 da la posibilidad también de proceder a la publicación en internet del sitio web creado: se inicia una sesión FTP mediante la que se transfieren al servidor todos los archivos necesarios para hacer el sitio web inmediatamente visible en la red. WebSite X5 es compatible con la conexión segura y permite ahorrar tiempo trabajando en multi-conexión y publicando solo los archivos modificados.

Además de la publicación en Internet es posible exportar el proyecto a otro disco del equipo o crear fácilmente una copia de backup.


Diferencias entre versiones

Versiones disponibles

Introducción >

Versiones disponibles

 Return to chapter overview

WebSite X5 está disponible en distintas versiones, las principales son: Evolution y Compact.

Para obtener una visión general de las diferencias entre las versiones disponibles, consultar la página http://www.websitex5.com/compare


El ambiente de trabajo

El ambiente de trabajo >

El ambiente de trabajo

 Return to chapter overview
Mostrar/ocultar el texto oculto

Proponiéndose como un comportamiento guiado, WebSite X5 se presenta como una serie de ventanas mediante las cuales el usuario llega a introducir toda la información necesaria para crear y publicar un Sitio Web completo, funcional y gráficamente atrayente.

Todas las páginas de pantalla presentadas por el programa tienen en común una interfaz gráfica idéntica que cuenta con una botonera superior, una lateral y una inferior que permanecen siempre igual, y una ventana central que cambia en función de la fase de trabajo y, por lo tanto, de la información requerida.

Pulsar para expandir/reducir
El ámbito de trabajo
Pulsar para expandir/reducir Botonera superior

La botonera superior presenta comandos que es útil tener siempre disponibles, independientemente de la fase de trabajo que se esté afrontando. Estos comandos sirven principalmente para abrir la ayuda online y obtener información sobre el funcionamiento del programa, para guardar el proyecto y administrar los backups, y para mostrar una vista previa del proyecto localmente en el explorador.

§Ayuda: abre esta ayuda online. A través de la flecha a la izquierda del botón Ayuda se puede acceder también a los comandos:

-Resumen...: abre esta ayuda online.

-Video Tutorial: abre una página web donde se ofrecen algunos útiles video-tutoriales que explican cómo empezar a trabajar con WebSite X5.

-WebSite X5 Gallery: abre la sección de WebSite X5 Answers , que recoge las páginas web creadas con WebSite X5 que han sido señaladas directamente por sus autores.

-WebSite X5 Templates: abre la sección de WebSite X5 Answers dedicada a las plantillas. Presenta nuevos modelos gráficos, creados ya sea por Incomedia como por otros autores, que pueden ser visualizados y descargados, bien gratuitamente o mediante un pago.

-Soporte técnico: abre WebSite X5 Answers, la página web a través de la que se proporciona asistencia técnica para WebSite X5. En WebSite X5 Answers se puede tanto consultar el archivo de las preguntas frecuentes (FAQ) y de los tutoriales publicados como abrir un ticket de asistencia.

-www.websitex5.com: abre el sitio web de referencia para WebSite X5.

-Informaciones sobre WebSite X5: muesta alguna información general sobre la copia de WebSite X5 instalada.

§Guardar [CTRL + S]: guarda el proyecto en curso. El proyecto se archiva automáticamente en la Carpeta de proyectos especificada en la ventana Preferencias. A través de la flecha a la izquierda del botón Guardar se puede acceder también a los comandos:

-Guardar en cada vista previa: guarda automáticamente el proyecto cada vez que se utiliza el comando Vista previa para ver la vista previa del sitio web localmente.

-Crear una copia de seguridad con el primer guardado: crea automáticamente una copia de backup del proyecto (file Backup.iwprj) solo tras el primer guardado efectuado en la sesión de trabajo en curso.

-Hacer copia de seguridad con cada subida: crea automáticamente una copia de backup del proyecto (file Uploaded_timestamp.iwprj) antes de proceder a cada publicación en línea del sitio web.

Las copias de backup generadas mediante las funciones Crear una copia de seguridad con el primer guardado y Hacer copia de seguridad con cada subida son guardadas en la subcarpeta Backup que hay dentro de la Carpeta de proyectos especificada en la ventana Preferencias.

Para crear una copia del proyecto, en lugar de usar un comando Guardar como, basta con utilizar el comando Duplicar disponible en la ventana Elección del proyecto.

-Vista previa: da la posibilidad de visualizar mediante el Navegador interno una vista previa local del sitio web realizado.

Si se deja activa la opción Actualizar las páginas mientras modifica el proyecto disponible en la ventana Preferencias, cada vez que se lleva a término una modificación (y, por ejemplo, se pulsa un botón Aceptar o un botón Siguiente) el programa vuelve a crear todo lo relacionado con esa modificación. Esto permite mantener siempre actualizada la vista previa del sitio web localmente y poder visualizarla sin tiempos de espera.

Además, es posible activar también la opción Guardar en cada vista previa de manera que pulsando sobre el botón Vista previa se efectúa también un guardado del proyecto.
Pulsar para expandir/reducir Botonera lateral

WebSite X5 permite llegar a realizar un sitio web en solo 5 pasos. Los botones que permanecen siempre disponibles en la columna a la izquierda de la ventana del programa sirven por lo tanto para indicar qué fase del proceso de creación del sitio web se está afrontando o para pasar directamente a una de ellas, independientemente del orden en el que se presentan.

 | Elección del proyecto
1. | Ajustes generales
2. | Creación del mapa
3. | Creación de páginas
4. | Ajustes avanzados
5. | Exportar
Pulsar para expandir/reducir Botonera inferior

La botonera inferior ofrece los comandos necesarios para moverse entre las diferentes ventanas del programa:

§Atrás: vuelve a la ventana anterior para modificar los ajustes definidos.

§Siguiente: pasa a la ventana siguiente para continuar la creación del sitio web.


Bienvenidos a WebSite X5

Bienvenidos a Incomedia WebSite X5

El ambiente de trabajo >

Bienvenidos a Incomedia WebSite X5

 Return to chapter overview

Esta ventana de bienvenida es la primera a la que se accede después de haber abierto WebSite X5 y tiene la función de proponer enlaces a recursos y materiales en línea útiles para trabajar lo mejor posible con el programa. Más concretamente, estos enlaces son presentados mediante una botonera lateral organizada como sigue:

Tutorial de vídeo: abre una página web donde se ofrecen algunos útiles video-tutoriales que explican cómo empezar a trabajar con WebSite X5.

WebSite X5 Gallery: abre la sección de WebSite X5 Answers , que recoge las páginas web creadas con WebSite X5 que han sido señaladas directamente por sus autores.

WebSite X5 Templates: abre la sección de WebSite X5 Answers dedicada a las plantillas. Presenta nuevos modelos gráficos, creados ya sea por Incomedia como por otros autores, que pueden ser visualizados y descargados, bien gratuitamente o mediante un pago.

WebSite X5 Answers: abre WebSite X5 Answers, la página web a través de la que se proporciona asistencia técnica para WebSite X5. En WebSite X5 Answers se puede tanto consultar el archivo de las preguntas frecuentes (FAQ) y de los tutoriales publicados como abrir un ticket de asistencia.

Buscar actualizaciones: permite verificar la disponibilidad de actualizaciones en línea para la versión instalada de WebSite X5. Para una mejor experiencia de trabajo, aconsejamos instalar siempre las actualizaciones disponibles.

Preferencias: abre la ventana Preferencias en la que se pueden configurar algunos parámetros generales referidos al funcionamiento del programa.

Además de esta botonera, la ventana de bienvenida presenta contenidos que en caso de estar conectados a internet pueden ser actualizados en tiempo real, proponiendo temas como: información sobre el estado de actualización del programa instalado, noticias, contenidos especiales (artículos de profundización, WhitePaper, consejos y trucos), nuevos tutoriales de vídeo y ofertas y promociones disponibles.

Si no hay una conexión a internet, como contenido de la ventana de bienvenida se carga una página estándar. Esta misma página estándar se mostrará también si se desactiva la opción Buscar actualizaciones al iniciar el programa de la ventana Preferencias.

Una vez explorados los contenidos de la ventana de bienvenida, se puede ya entrar en la experiencia de la creación de un sitio web simplemente punsando el botón Iniciar.


La ventana Preferencias

El ambiente de trabajo >

La ventana Preferencias

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana, que se abre con el botón Preferencias de la Página de Bienvenida, permite configurar algunos parámetros generales referidos al funcionamiento del programa.

Pulsar para expandir/reducir Referencia: Los comandos de la ventana Preferencias

Las opciones disponibles en la sección General son:

§Carpeta de proyectos: es la carpeta en la que se guarda el archivo de proyecto (archivo Project.IWPRJ), ya sea en el caso de la creación de un nuevo proyecto, o en el caso de importación de un proyecto ya existente (ver Elección del proyecto | Importar...). Dado que se especifica aquí, pulsando el botón Guardar mientras se trabaja en el desarrollo del sitio web, el proyecto se guardará sin que se pregunte la carpeta de destino.

§Buscar actualizaciones al iniciar el programa: comprueba si hay actualizaciones disponibles cada vez que se arranca el programa. Para efectuar esta comprobación, el programa se conecta al Servidor Incomedia a través de internet.

Se aconseja dejar activa esta opción para tener la certeza de trabajar siempre con la versión más actualizada de WebSite X5.

Las opciones referidas a la Generación de archivos son:

§Actualizar vista previa mientras se trabaja en el proyecto: hace que la vista previa del sitio web se actualice constantemente, a medida que se avanza en el desarrollo del proyecto. Como consecuencia de esto, cada vez que se lleva a cabo una modificación (y, por ejemplo, se pulsa un botón Aceptar o un botón Siguiente), el programa actualiza automáticamente la vista previa del sitio web que se muestra en el explorador local.

§Actualizar las páginas mientras modifica el proyecto: permite hacer que las páginas del sitio web sean creadas ya durante la modificación del Proyecto. Como consecuencia de esto, cada vez que se lleva a cabo una modificación (y, por ejemplo, se pulsa un botón Aceptar o un botón Siguiente) el programa vuelve a crear todo lo relacionado con esa modificación. Esto permite mantener siempre actualizada la vista previa del sitio web localmente y poder visualizarla usando el botón Vista previa sin tiempos de espera.

§Número máx. de procesos simultáneos: permite predisponer el número de procesos (o Thread) iniciados por el programa que deben ser efectuados simultáneamente por el ordenador.

¿Qué es el Multithreading?

La técnica de subdividir un proceso en varios procesos que después son ejecutados al mismo tiempo se denomina Multithreading y, para funcionar, es necesario que el ordenador sea compatible con ella. En otras palabras, el Multithread intenta aprovechar al máximo la unidad de cálculo del ordenador haciéndole efectuar varios procesos en paralelo. Gracias a esta técnica un programa que, como WebSite X5, ha sido desarrollado subdividiendo la carga de trabajo en varios procesos, puede lograr notables mejoras en las prestaciones.

Para obtener una ventaja real del Multithreading es preciso valorar la configuración de hardware del ordenador en el que se trabaja. Se aconseja empezar con 5 procesos simultáneos y probar a modificar dicho parámetro, aumentándolo progresivamente, para identificar el mejor número según las propias exigencias.

Por último, los ajustes de la Configuración del servidor web para la vista previa local que se pueden modificar son:

§Puerto: es el puerto en el que WebSite X5 configura en escucha su WebServer local para la visualización de la vista previa del sitio web.

§Dirección IP: es la dirección IP en la que WebSite X5 configura en escucha su WebServer local para la visualización de la vista previa del sitio web. Por defecto está configurada la dirección IP 127.0.0.1 que identifica siempre el ordenador local.

Se aconseja no modificar los valores de las opciones Puerto y Dirección IP si no se está seguro de lo que se está haciendo.

Best practice:

-

Cómo administrar el backup de los proyectos


Paso 0 - Elección del proyecto

Elección del proyecto

Paso 0 - Elección del proyecto >

Elección del proyecto

 Return to chapter overview
Mostrar/ocultar el texto oculto

Una vez iniciado WebSite X5, tras la Página de bienvenida inicial, se accede a la ventana Elección del proyecto en la que se pide especificar en qué proyecto se desea trabajar.

Es posible elegir si crear un nuevo proyecto o si modificar uno ya realizado anteriormente.

Pulsar para expandir/reducir Referencia: Los comandos de la ventana Elección del proyecto

§Crear un nuevo proyecto: al seleccionar esta opción se inicia la realización de un nuevo sitio web del que es preciso especificar enseguida el nombre, escribiéndolo en el campo al efecto que está debajo. Será posible guardar el proyecto creado mediante el botón Guardar , disponible en todo momento en la botonera superior.

Durante las operaciones de guardado no es necesario especificar la ruta ya que los proyectos son gestionados automáticamente por el programa y guardados en la Carpeta de proyectos establecida mediante la ventana Preferencias.

§Editar un proyecto existente: inicia la apertura de un Proyecto creado anteriormente para poder modificarlo o actualizarlo. Todos los proyectos ya existentes se muestran en una lista al efecto. Para seleccionar más fácilmente qué proyecto abrir, es posible utilizar los siguientes comandos:

Mostrar iconos grandes - Mostrar títulos - Mostrar lista - Mostrar detalles

Definen la modalidad de visualización de las vistas previas de los proyectos.

Mostrar grupos según última fecha de edición

Hace que los proyectos sean agrupados y mostrados en función de la fecha de la última modificación.

Los proyectos se pueden gestionar por medio de los siguientes comandos:

§Importar...: importa un proyecto creado anteriormente y exportado (ver Exportar el Proyecto) con WebSite X5 desde otro PC.

§Renombrar: cambia el nombre del proyecto seleccionado. También se puede hacer clic una segunda vez en un proyecto ya seleccionado para poder cambiarle el nombre.

§Duplicar: crea una copia del proyecto seleccionado.

§Eliminar: elimina el proyecto seleccionado.

Best practice:

-

Cómo administrar el backup de los proyectos


Ajustes generales

Paso 1 - Ajustes generales >

Ajustes generales

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana inicial, la primera del Paso 1, tiene el objetivo de recoger, mediante oportunos campos, alguna información necesarias para configurar los parámetros básicos del proyecto en el que se está trabajando.

Es importante, por ejemplo, definir un título, especificar el URL, establecer un idioma y disponer códigos y los metatags necesarios para la activación de servicios adicionales como el de las estadísticas de acceso. Todos estos parámetros pueden ser predispuestos inmediatamente o también más adelante.

Concretamente, las opciones disponibles están organizadas en dos secciones: General y Avanzado.

Pulsar para expandir/reducir Referencia: Las opciones de la sección General

§Título del sitio: campo para introducir el título que se quiere poner al sitio web. Este título se mostrará en la barra del título del explorador y es, obviamente, un parámetro importante para permitir localizar correctamente el sitio web a usuarios y motores de búsqueda.

Como título del sitio se toma automáticamente el nombre asignado al Proyecto (ver: Elección del proyecto): En cualquier caso, el título del sitio web se puede cambiar y establecer en función del tema tratado y de las exigencias de optimización específicas.

§Autor del sitio: campo para introducir el nombre de la persona o de la sociedad que figurará como autor del sitio web. El nombre del autor se indica en el código HTML de las páginas realizadas como valor del metatag <author>: de este modo, se pone la firma en el trabajo realizado.

§Dirección URL: campo para especificar la dirección URL (por ejemplo, http://www.misitio.es) en el que estará disponible el sitio web una vez sea publicado. Esta información es necesaria para el correcto funcionamiento de posibles fuentes RSS, del carrito de la compra y del Mapa del Sitio que el programa crea automáticamente.

§Descripción del sitio: campo para introducir una breve descripción del sitio web. Es preferible que el contenido de la descripción sea conciso, eficaz y significativo para el sitio web al que se refiere, ya que esta descripción se utilizará en el código HTML como contenido del metatag <description> y será analizada por los spiders de los motores de búsqueda.

§Palabras clave para la búsqueda: campo para introducir una lista de palabras clave (separadas entre sí por una coma) que sean relevantes para el Sitio web. Las palabras clave se insertarán en el código HTML como valores del metatag <keywords> y podrán ser empleadas por los motores de búsqueda.

La Descripción del sitio y la lista de Palabras clave para la búsqueda añadidas mediante estos campos se asocian automáticamente a la página de inicio del sitio web.

Para una mejor optimización del sitio web se recomienda asociar a cada página, o al menos a las más importantes, una descripción y una lista de palabras clave específicas. Para hacer esto basta acceder a la ventana Creación de mapa, seleccionar la página en la que se quiere trabajar y pulsar el comando Propiedades....

§Idioma de los contenidos: especifica el idioma del sitio. En función del idioma elegido, se muestra la correspondiente versión de los textos añadidos automáticamente por el programa: enlaces a delimitadores internos, etiquetas del Objeto Formulario de envío e-mail, etiquetas y textos del carrito de la compra, textos del Mapa del Sitio.

Para poder modificar los textos añadidos automáticamente por el programa o añadir nuevas lenguas, basta pulsar el botón [image] y utilizar las opciones disponibles en la ventana Gestión de contenido de idioma.

§Icono para el sitio: especifica qué icono (archivos .ICO, .PNG, .GIF y .JPG) asociar a las páginas web del sitio. Este icono se mostrará a la izquierda del URL en la barra de direcciones del explorador de internet.

Como icono asociado a un sitio web (o favicon, del inglés "favorites icon") puede usarse una imagen en formato .ICO, .PNG, .GIF y .JPG. Mientras que los archivos .ICO son importados tal y como son, para los archivos en formato .PNG, .GIF. y .JPG, da igual qué tamaño tengan, WebSite X5 crea automáticamente una copia como archivo .PNG de 16x16 píxeles y utiliza esta copia como "favicon".
Pulsar para expandir/reducir Referencia: Las opciones de la sección Avanzado

§Código personalizado: define la posición en el interior del código HTML de la página en la que debe ser insertado el código personalizado: Antes de la apertura de la etiqueta HTML, Antes del cierre de la etiqueta HEAD, Propiedades de la etiqueta BODY (ej.: style, onload, etc.) (es decir dentro de la instrucción <BODY>, por ejemplo: <BODY onload="alert('Hello!')">), Antes del cierre de la etiqueta BODY, Después del cierre de la etiqueta BODY. Una vez seleccionada la posición, está disponible un campo en el que se puede teclear o pegar el segmento de código que debe ser insertado en el interior del código HTML de la página creado automáticamente por el programa.

Este campo se puede utilizar, por ejemplo, para activar un servicio de estadísticas de acceso al sitio web como Google Analytics™.

Para mayor información sobre el servicio Google Analytics™ y para registrar una cuenta, pulsar el botón [image] y acceder al sitio web oficial: http://www.google.it/analytics/.

§Metatag de control para Google WebMaster Central: campo para insertar el metatag de verificación necesario para poder utilizar las herramientas puestas a disposición por Google Webmaster Central™.

Para mayor información sobre el servicio Google WebMaster Central™ y para registrar una cuenta, pulsar el botón [image] y acceder al sitio web oficial: <lc> http://www.google.com/webmasters/.

§Crear un SiteMap automáticamente: activada por defecto, hace que se cree y enlace automáticamente el Sitemap del Sitio.

Para que el SiteMap del Sitio se construya y funcione correctamente es necesario indicar una dirección URL válida en el campo Dirección URL que está en Ajustes generales | General.

§Activar protección de acceso al código HTML: activa la protección de las páginas del sitio publicado desactivando la pulsación del botón derecho del ratón. De esta manera el visitante no podrá acceder al código fuente de las páginas en línea a través de los comandos del menú contextual que se abre pulsando el botón derecho del ratón sobre las páginas.

Best practice:

- | Cómo gestionar los idiomas para los textos añadidos automáticamente
- | Qué hacer para usar Google Webmaster Central™
- | Cómo activar un servicio de estadísticas como Google Analytics

-

Cómo crear y conectar el SiteMap del sitio

Profundización:

-

El explorador web y el explorador de WebSite X5


Ventana Gestión de contenido de idioma

Paso 1 - Ajustes generales > Ajustes generales >

Ventana Gestión de contenido de idioma

 Return to chapter overview

Esta ventana, que se abre pulsando el botón [image] referido a la opción Idioma de los contenidos de la ventana Ajustes generales | General, permite gestionar los textos que el programa añade automáticamente como, por ejemplo, los enlaces a a delimitadores internos, los botones del Objeto de Galería, las etiquetas del Objeto Formulario de envío e-mail, las etiquetas y los textos del carrito de la compray los textos del Mapa del Sitio.

La ventana Gestión de contenido de idioma presenta en el lado izquierdo la lista de idiomas disponibles y, a la derecha, una tabla con las traducciones en los diversos idiomas. La primera columna de la tabla ofrece una descripción útil para identificar dónde se emplean los diferentes elementos; siguen unas columnas, una para cada idioma activo. Por idioma activo se entiende un idioma de entre los presentes en la lista de idiomas disponibles para el que se ha puesto una marca de verificación. Por lo tanto, es posible trabajar directamente en esta tabla para modificar o añadir elementos.

La ventana Gestión de contenido de idioma presenta los siguientes botones:

Agregar nuevo idioma: permite introducir, mediante la ventana de diálogo que se abre, el nombre del nuevo idioma que se quiere crear. El nombre del idioma debe ser introducido respetando el siguiente formato: "ID - NombreIdioma", por ejemplo "EN - English".

Eliminar el idioma seleccionado: elimina de la lista el idioma seleccionado.

Importar nuevo idioma: importa un nuevo idioma, guardado como archivo .XML, añadiéndolo a la lista de idiomas disponibles.

Exportar el idioma seleccionado: exporta el idioma de la lista seleccionado a un archivo .XML.

Los comandos Exportar el idioma seleccionado e Importar nuevo idioma sirven para guardar en un archivo .XML los elementos localizados en un idioma determinado y así poder llevarlos a otro PC.

Best practice:

- | Cómo gestionar los Idiomas para los textos añadidos automáticamente
- | Cómo crear un sitio web multi-idioma


Tonalidad de la plantilla

Paso 1 - Ajustes generales >

Tonalidad de la plantilla

 Return to chapter overview
Mostrar/ocultar el texto oculto

Uno de los factores que influyen en el éxito de un sitio web es el diseño gráfico. En efecto, aún antes de llegar a los contenidos y a la estructura de navegación, el aspecto del sitio web es lo que llama la atención del visitante, influyendo de manera determinante en el juicio que se hará de él. Es fácil entender que un diseño cuidado y profesional es interpretado como un indicio de un sitio de calidad, del cual valdrá la pena profundizar en sus contenidos.

WebSite X5 permite definir el aspecto del sitio web procediendo de dos maneras diferentes:

1.creando una plantilla personalizada a partir de cero o de una de las plantillas predefinidas;

2.utilizando una plantilla predefinida eligiéndola en la galería que cuenta con más de 1.500 plantillas ya instaladas con el programa.

Tanto las plantillas personalizadas como las predefinidas podrán más tarde completarse y enriquecerse con las numerosas funciones que pone a disposición el editor que se ofrece en la ventana Editor de plantilla.

Todas las plantillas predefinidas están optimizadas para una visualización de 1024 X 768 píxeles. Si se desea realizar un sitio optimizado para una resolución distinta, se puede utilizar la Plantilla personalizada.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Tonalidad de la plantilla

La mayor parte de la ventana Tonalidad de la plantilla está dedicada a la visualización de las plantillas disponibles. Para facilitar la elección de la plantilla que se utilizará es posible usar los siguientes comandos, que definen qué plantillas y cómo deben mostrarse:

Lista de categorías

Ofrece la lista de las categorías en las que están organizadas las plantillas, para poder elegir cuál visualizar. La primera categoría "Personalizadas" contiene todas las plantillas personalizadas que son creadas desde cero y se muestra solo si hay al menos una plantilla de este tipo. Las categorías siguientes reúnen las plantillas predefinidas disponibles.

Menú

Filtra las plantillas predefinidas en función del tipo de Menú que presentan, para permitir elegir si ver aquellas con menús horizontales, verticales, o todas.

Mostrar las vistas previas pequeñas - Mostrar las vistas previas medianas - Mostrar las vistas previas grandes

Definen la modalidad de visualización de las vistas previas de las plantillas.

Modificar la tonalidad de la plantilla

Abre la ventana Tonalidad de la plantilla para cambiar la tonalidad de los colores de la plantilla seleccionada.

Para trabajar con las plantillas, en cambio, es posible usar los siguientes comandos:

§Nueva plantilla: activa la creación de una nueva plantilla personalizada a partir de cero. Las plantillas así creadas se presentan dentro de la categoría "Personalizadas".

§Renombrar: cambia el nombre de la plantilla seleccionada. Este comando está disponible solo para las plantillas personalizadas: no es posible cambiar el nombre de las plantillas predefinidas. También se puede hacer clic una segunda vez en una plantilla personalizada ya seleccionada para cambiarle el nombre.

§Duplicar: crea una copia de la plantilla seleccionada.

§Eliminar: elimina la plantilla seleccionada. Este comando está disponible solo para las plantillas personalizadas: no es posible borrar las plantillas predefinidas.

§Editar...: abre la plantilla seleccionada en la ventana Editor de plantilla, permitiendo así su edición. El comando está disponible solo para las plantillas personalizadas: si se quiere editar una plantilla predefinida, es necesario hacer primero una copia de ella con el botón Duplicar.

§Importar...: importa una nueva plantilla (archivo .IWTPL) creada con WebSite X5 y exportada con la función al efecto.

§Exportar...: exporta la plantilla seleccionada (archivo .IWTPL) a la carpeta especificada. La plantilla exportada podrá ser compartida e importada en otros equipos.

Nota sobre la compatibilidad con las versiones precedentes:

§Menú Horizontal / Vertical - Mientras en las versiones anteriores la elección entre menú horizontal o vertical se hacía en la ventana "elección del tipo de menú" (hasta la versión 8) o a través de una opción al efecto (en la versión 9), en esta versión 10 basta seleccionar la plantilla predefinida que contempla el menú en la orientación deseada. Si se crea una plantilla personalizada, en cambio, es necesario configurar el Tipo de menú mediante la opción correspondiente.

§Variantes - En la versión 8, para cada plantilla predefinida había disponibles 4 variantes de color. En la versión 9 que siguió, las variantes de color fueron sustituidas por las variantes de estilo que se distinguían de las primeras en que no presentaban solo paletas de color diferentes, sino también ajustes y elementos gráficos diferentes. En esta versión 10, no se ha mantenido la distinción entre variantes de estilo: todas las plantillas se distinguen por la presencia de elementos y/o configuraciones peculiares y están comprendidas dentro de la lista general.

Best practice:

- | Cómo trabajar con las plantillas
- | Dónde encontrar nuevas plantillas para WebSite X5


Ventana Tonalidad de la plantilla

Tonalidad de la plantilla | Tonalidad de la plantilla

Paso 1 - Ajustes generales > Tonalidad de la plantilla >

Tonalidad de la plantilla | Tonalidad de la plantilla

 Return to chapter overview

Esta ventana, que se abre pulsando el botón [image] de la ventana Tonalidad de la plantilla, permite elegir la tonalidad que se desea para los colores de la plantilla predefinida o personalizada en la que se está trabajando.

Para configurar la tonalidad hacia la que los colores de la plantilla deben tender basta desplazar el cursor del control Tonalidad.

Gracias a esta opción, las variantes gráficas de una plantilla se vuelven prácticamente infinitas.

La tendencia de la tonalidad ajustada afecta a todos los elementos que conforman la plantilla, pero no tiene efectos visibles en colores como el blanco, el negro y las tonalidades de gris.

Best practice:

- | Cómo trabajar con las plantillas
- | Dónde encontrar nuevas plantillas para WebSite X5


Plantilla personalizada

Paso 1 - Ajustes generales >

Plantilla personalizada

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 permite crear una plantilla de estilo personalizada empezando desde cero. Para hacerlo basta pulsar el botón Nueva plantilla de la ventana Tonalidad de la plantilla para hacer aparecer la vista previa de una nueva plantilla en la categoría Personalizadas. Haciendo doble clic directamente sobre esta vista previa se accede a la ventana Plantilla personalizada y se puede proceder a la creación de la plantilla.

Para facilitar el trabajo, la ventana Plantilla personalizada ofrece una Vista previa en la que se muestra una representación esquemática de la página. Es posible elegir la sección a modificar de la lista, o se puede también hacer clic directamente en las distintas áreas de la estructura en la vista previa de la página para poderlas seleccionar, modificar su aspecto con los comandos disponibles y ver enseguida el resultado de las acciones realizadas.

Pulsar para expandir/reducir Referencia: Los comandos para configurar el tipo de Menú

En primer lugar, para proceder a la creación de una plantilla personalizada es necesario especificar el Tipo de menú, es decir dónde y cómo debe estar situado el menú de navegación dentro de todas las páginas del sitio web. Las distintas posibilidades son:

Horizontal – Menú sobre el encabezamiento

Horizontal – Menú debajo del encabezamiento

Vertical - Menú a la izquierda

Vertical - Menú a la derecha
Pulsar para expandir/reducir Referencia: Los comandos para seleccionar las secciones de la página

Una vez elegido el tipo de Menú, es preciso seleccionar la Sección de página sobre la que se quiere trabajar. Las secciones en que está dividida la página son:

Fondo de la página: es el área externa a la página que se muestra cuando la ventana del explorador es abierta con un tamaño superior al de la resolución del sitio web.

Fondo del encabezado: es la parte del Fondo de la página que está detrás del Encabezamiento.

Encabezamiento: también llamado "header", consiste en una sección, principalmente gráfica, ideal para contener elementos como el título y subtítulo del sitio web, el logotipo de la empresa, campos de búsqueda, menús de servicio con los enlaces, por ejemplo, para la visualización del mapa o para la elección del idioma de consulta.

Menú: es el área destinada a contener la navegación fija, esto es, los elementos del primer nivel del menú que deben estar presentes, inalterados, en cada página del sitio web. Obviamente, la posición de esta área cambia dependiendo de la estructura del sitio que se haya elegido.

Contenido de la página: es el área destinada a alojar el verdadero contenido de las páginas y, en su caso, los submenús de navegación.

Pie de página: también llamado "footer", es otra sección principalmente gráfica que tiene la finalidad de cerrar visualmente la página. Por lo general, en esta área están colocados elementos como notas, disclaimer, copyright, número de identificación fiscal o direcciones de correo electrónico.

Fondo del pie de página: es la parte del Fondo de la página que está detrás del Pie de página.

Si se ajusta el Fondo del encabezado o el Fondo del pie de página como Transparente, estos son tratados como parte integrante del Fondo de la página y asumen su mismo aspecto. En caso contrario, se dispondrá de bandas para el Encabezamiento y/o el Pie de página que ocupan todo el ancho de la ventana del explorador.
Pulsar para expandir/reducir Referencia: Las opciones para configurar las propiedades gráficas

Para todas las secciones de la página es posible configurar las siguientes Propiedades gráficas:

§Color: especifica el color para usar como relleno del fondo.

§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo. En el caso del Encabezamiento o del Pie de página es posible predisponer también una animación Flash (.SWF).

§Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen puede repetirse solo en sentido horizontal, solo en el vertical o en ambos sentidos, hasta llegar a llenar el espacio disponible. Además, solo para la sección Fondo de la página, es posible hacer que la imagen se adapte o cambie su tamaño para cubrir todo el fondo. En este caso, podrían no respetarse las proporciones originales.

§Alineación: permite especificar cómo se debe alinear la imagen insertada respecto al área de la página seleccionada.

Solo para el área Fondo de la página está disponible la opción:

§Imagen de fondo fija: activando esta opción, la imagen insertada como fondo de la página se mantiene fija también cuando el contenido de la página se desplaza mediante la barra de scroll.
Pulsar para expandir/reducir Referencia: Las opciones para definir el tamaño

Para algunas áreas de la página es posible especificar también el Tamaño.

Para las áreas Encabezamiento y Menú está disponible la opción:

§Ancho: indica el valor expresado en píxeles de la anchura del área de la página seleccionada. Para el tipo de Menú vertical, el valor del Ancho está establecido por defecto en 960 píxeles para la sección Encabezamiento y en 120 píxeles para la sección Menú pero, en cualquier caso, se puede modificar libremente. Para el tipo de Menú horizontal, en cambio, el valor del Ancho definido para el Encabezamiento se toma automáticamente también para el Menú, el Contenido de la página y el Pie de página.

El valor del Ancho predeterminado por defecto está calculado para obtener un sitio web optimizado para una visualización a 1024x768 píxeles.

Para todas las áreas, a excepción del Fondo de la página y del Contenido de la página, está disponible la opción:

§Altura: indica el valor expresado en píxeles de la altura del área de la página seleccionada.

Solo para el área Contenido de la página está disponible la opción:

§Altura mínima: indica el valor en píxeles de la altura mínima que debe tener el área de la página destinada a los contenidos, con independencia de la altura de los contenidos efectivamente introducidos.
Pulsar para expandir/reducir Referencia: Las opciones para configurar las propiedades de los contenidos

Por último, también solamente para algunas áreas de la página es posible configurar las Propiedades de los contenidos.

Para las secciones Fondo de la página, Menú y Contenido de la página está disponible la opción:

§Márgenes: especifica el valor en píxeles que se quiere establecer para los márgenes. El margen es el espacio vacío existente entre el borde de la sección y su contenido.

Solo para las secciones Fondo de la página y Menú está disponible también la opción:

§Alineación: para el Fondo de la página, especifica cómo debe ser alineada la página respecto a la ventana del explorador, para el Menú, en cambio, especifica cómo deben ser alineados los botones de los que consta respecto a la página.

El ancho efectivo de las páginas del sitio web viene dado por el ancho de la sección Contenido de la página (dependiente del ancho del área Encabezamiento) menos el margen izquierdo y el margen derecho.

El encabezado de la plantilla realizada puede completarse con la inserción de textos, imágenes, animaciones Flash, presentaciones, campos de búsqueda y enlaces: las opciones necesarias se ofrecen en la ventana Editor de plantilla a la que se accede pulsando el botón Siguiente.

Best practice:

- | Cómo trabajar con las plantillas
- | Dónde encontrar nuevas plantillas para WebSite X5


Editor de plantilla

Paso 1 - Ajustes generales >

Editor de plantilla

 Return to chapter overview
Mostrar/ocultar el texto oculto

Después de haber elegido una de las plantillas predefinidas en la ventana Tonalidad de la plantilla o tras haber creado una plantilla a partir de cero mediante la ventana Plantilla personalizada, se accede a la ventana Editor de plantilla. Mediante las secciones Encabezamiento y Pie de página de esta ventana es posible personalizar, respectivamente, el encabezamiento y/o el pie de página de la plantilla misma añadiendo textos, imágenes, animaciones Flash, presentaciones, código HTML, campos de búsqueda y enlaces.

Ya sea trabajando sobre la imagen del Encabezamiento que sobre la del Pie de página, los comandos y opciones disponibles son los mismos.

Si en las secciones Encabezamiento o Pie de página se establece como fondo una animación Flash, la ventana Editor de plantilla no dará la posibilidad de personalizarla.
Pulsar para expandir/reducir Referencia: Cómo se presenta el editor de plantilla

La ventana Editor de plantilla presenta un editor gráfico en el que, inmediatamente bajo la barra de herramientas, se presenta la imagen utilizada como fondo del encabezado o del pie de página del modelo elegido (ya sea predefinido o personalizado): la imagen se muestra a escala 1:1 y, si fuese necesario, se puede deslizar con la barra de desplazamiento horizontal incluida. Sobre esta imagen se muestran, en tiempo real, todas las modificaciones introducidas con los comandos disponibles.

Inmediatamente debajo de la imagen cargada hay una barra de estado en la que se indica:

§Posición muestra las coordenadas X e Y que identifican la posición del ángulo superior derecho del Objeto seleccionado.

§Tamaño muestra el valor expresado en píxeles de la anchura y de la altura del objeto seleccionado.
Pulsar para expandir/reducir Referencia: Los comandos de la Barra de Herramientas

Los comandos de la Barra de Herramientas permiten añadir nuevos objetos al Encabezamiento / Pie de página de la plantilla y configurar algunos de sus ajustes. Una vez añadido un objeto mediante el comando correspondiente, es posible entonces seleccionarlo y modificarlo a través de las opciones presentes en el recuadro que toma el nombre del objeto mismo.

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Respectivamente, cortan, copian o pegan el objeto seleccionado.

Deshacer [CTRL+Z]

Anula la última acción realizada.

Traer al primer plano - Llevar al segundo plano

Llevan el objeto seleccionado al primer plano o al segundo, es decir delante o detrás de todos los demás Objetos eventualmente superpuestos.

Asociar un enlace

Añade un enlace al texto, a la imagen o imágenes de la presentación seleccionadas. Es posible configurar los ajustes del enlace mediante la ventana que se abre, Enlace.

Posición y tamaño

Permite definir, mediante la ventana que se abre, las coordenadas que determinan la posición y el tamaño del Objeto seleccionado. La opción Mantener las proporciones, activa por defecto, hace que en las operaciones de cambio de tamaño se mantengan las proporciones originales del Objeto.

Insertar texto - Insertar imagen - Insertar una animación Flash - Insertar 'Presentación' - Insertar código HTML - Insertar campo de búsqueda

Permiten, respectivamente, insertar un Texto, una Imagen, una Animación Flash, una Presentación, código HTML o un Campo de búsqueda.

La presentación está conformada por una secuencia de imágenes que discurren automáticamente una tras otra. Puede ser útil para crear banners con fines publicitarios.

Mediante la introducción de código HTML es posible añadir cualquier tipo de contenido: de esta manera se puede ir mucho más allá de las posibilidades que ofrecen las herramientas.

Finalmente, el campo de búsqueda se sirve del motor interno para permitir al visitante realizar búsquedas en los contenidos del sitio web.

Las Animaciones Flash y los Objetos Código HTML introducidos se muestran solo cuando el sitio es abierto en el explorador.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Encabezamiento / Pie de página

Pulsando directamente en la imagen de fondo de las secciones Encabezamiento y Pie de página se selecciona la imagen y se puede operar con las siguientes opciones:

§Guardar como imagen JPG: durante la fase de creación del sitio web, los objetos Texto y los objetos Imagen añadidos en el Encabezamiento/Pie de página se fundirán con la imagen de fondo utilizada, que se guardará automáticamente como un nuevo archivo en formato PNG. La elección del formato PNG permite mantener las transparencias que se hubiesen configurado. Si no es necesario tratar con transparencias particulares, es posible activar la opción Guardar como imagen JPG para obtener una imagen de fondo de tamaño inferior.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Texto

Seleccionando un Objeto Texto insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Contenido: campo para introducir o pegar el contenido del texto.

§Fuente: permite especificar el tipo de fuente, el estilo y el tamaño en puntos del texto.

§Color Texto / Color Fondo: define el color del rótulo y del fondo del texto introducido.

§Guardar como imagen PNG: si está activada, hace que el texto añadido no se funda con la imagen de fondo del Encabezamiento/Pie de página sino que se guarde como una imagen .PNG con fondo transparente. En este caso, el texto original resulta asociado automáticamente a la imagen .PNG como texto alternativo (ALT text).
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Imagen

Seleccionando un Objeto Imagen insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Archivo imagen: selecciona el archivo gráfico relativo a la imagen que se quiere insertar. Pueden ser utilizados archivos con formato JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA y WMF.

§Archivo de imagen al pasar el ratón: selecciona un segundo archivo gráfico diferente que se mostrará al paso del puntero del ratón sobre la misma imagen. Esta opción es especialmente útil para la creación de botones con efecto pulsado/soltado (efecto mouseover).

§Habilitar transparencia: aplica la transparencia a la imagen, haciendo invisible el color especificado.

§Transparencia: especifica qué color de la imagen insertada se hará invisible si se activa la opción Habilitar transparencia. En estos casos la herramienta "cuentagotas" resulta muy útil ya que permite capturar el color directamente de la imagen.

§Tolerancia: esta opción permite especificar el factor de tolerancia al aplicar la transparencia. Cuanto mayor sea el valor de la tolerancia, mayor será el área de transparencia de la imagen.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Animación Flash

Seleccionando un Objeto Animación Flash insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Archivo de animación: selecciona el archivo .SWF relativo a la animación Flash que se quiere insertar.

§Fondo transparente: hace invisible el fondo de la animación.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Presentación

Seleccionando un Objeto Presentación insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Lista de imágenes para visualizar: muestra la lista de las imágenes que componen la presentación. Para cada imagen introducida, se indica la ruta de acceso del archivo además de, si los hay, del efecto y del enlace asociados. Seleccionando un archivo de la lista se obtiene su visualización en la vista previa. También es posible efectuar una selección múltiple de archivos utilizando los comandos CTRL + clic y SHIFT + clic.

§Agregar... / Eliminar: permiten, respectivamente, agregar nuevas imágenes o eliminar las imágenes seleccionadas de la lista de aquellas que componen la presentación. La ventana de selección de archivo que se abre permite también seleccionar varios archivos a la vez.

§Subir / Bajar: modifican el orden en el que se muestran las imágenes ya añadidas en la Lista de imágenes para visualizar en la presentación, desplazando hacia arriba o hacia abajo la imagen seleccionada.

§Efecto...: abre la ventana Propiedades de los efectos mediante la cual es posible configurar efectos de entrada, movimiento y zoom para las imágenes de la presentación seleccionadas de entre las que hay en la Lista de imágenes para visualizar.

§Reproducción automática: hace que la presentación comience automáticamente nada más el explorador de internet ha cargado el sitio web.

§Visualizar en orden casual: hace que las imágenes introducidas en la presentación se reproduzcan aleatoriamente y no según el orden en el que fueron añadidas en la Lista de imágenes para visualizar.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Código HTML

Seleccionando un Código HTML insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Código HTML: campo para teclear o pegar el código HTML referido al objeto que se quiere crear. La Barra de Herramientas que se muestra ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado.

Deshacer [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar Widgets

Inserta el código referido al Widget seleccionado: pulsando sobre la flecha al lado del botón es posible visualizar la lista de todos los Widgets disponibles, tomados de la lista del Objeto HTML y Widgets. Haciendo clic sobre el Widget deseado se abre la ventana Widget mediante la cual es posible definir los parámetros previstos. Confirmando se genera el código HTML relativo al Widget y se inserta automáticamente en el editor

§Visualizar barras de desplazamiento: activa la visualización de las barras de desplazamiento.

Nota sobre la compatibilidad con las versiones precedentes:

En la anterior versión 9, el editor de Código HTML permitía insertar automáticamente Snippets (breves líneas de código). En cambio, en la presente versión 10, los snippets se han enriquecido y han sido incorporados a la lista de los widgets.
Pulsar para expandir/reducir Referencia: Los comandos del recuadro Campo de búsqueda

Seleccionando el Campo de búsqueda insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Etiqueta del botón: es el texto que se muestra dentro del botón que hace comenzar la búsqueda.

§Fuente: permite especificar el tipo de fuente, el estilo y el tamaño en puntos del texto.

§Colores del campo: define el color del texto y del fondo del campo.

§Colores del botón: define el color del texto y del fondo del botón.

§Añadiendo un Campo de búsqueda en la sección Encabezamiento / Pie de página de la plantilla, se muestra automáticamente en el Mapa la página especial "Buscar": es posible seleccionarla y abrir la ventana Propiedades de la página para definir sus propiedades principales.

§Los resultados de las búsquedas efectuadas dentro del sitio web son presentados en páginas creadas automáticamente por el programa: el aspecto gráfico de estas páginas se establece según los ajustes de estilo de los textos (ver Estilos y Modelos en el Paso 4 - Ajustes avanzados).

Pulsar para expandir/reducir Referencia: Los comandos del recuadro Efectos

Seleccionando un Objeto Texto, un Objeto Imagen o un Objeto Presentación insertado en la sección Encabezamiento / Pie de página es posible modificar las siguientes opciones:

§Tipo de efecto: permite seleccionar y activar uno o más efectos para aplicar al Objeto seleccionado.

A cada Objeto Texto, Imagen y Presentación pueden aplicarse también varios efectos a la vez, para cada efecto es posible modificar sus ajustes:

Efecto

Ajustes

Sombra

§Difusión: define el factor de difusión de la sombra que se aplica.

§Color: define el color de la sombra que se aplica.

§Distancia X / Distancia Y: permiten definir de cuánto se debe desplazar horizontalmente la sombra respecto al objeto al que se aplica. Introduciendo un valor positivo se consigue un desplazamiento de la sombra, respectivamente, hacia la derecha o hacia abajo; y al contrario, introduciendo un valor negativo se obtiene un desplazamiento de la sombra hacia la izquierda o hacia arriba.

Espejo

§Difusión: define el factor de difusión, es decir el tamaño del reflejo que se aplica.

§Distancia: permite definir a qué distancia debe estar el reflejo respecto al objeto al que se aplica.

Borde a color

§Grosor: define el valor en píxeles del grosor del borde que se aplica.

§Color: define el color del borde a aplicar.

Brillo exterior

§Difusión: define el factor de difusión del brillo a aplicar.

§Color: define el color del brillo a aplicar.

Convexo

§Profundidad: define cómo de acentuada debe ser la curvatura del efecto que se aplica.

§Difusión: define el factor de difusión del efecto convexo que se aplica.

§Ángulo: define el ángulo de la curvatura que se aplica.

Rotación

§Ángulo: esta opción permite definir el valor del ángulo de rotación (en dirección de las agujas del reloj) que se aplica.

Opacidad

§Opacidad: permite predisponer un valor de 0 a 255 para definir el grado de opacidad de la imagen. Para valores que tienden a 0 disminuye la opacidad de la imagen que, de este modo, es cada vez más transparente.

Desenfocado

§Difusión: define el factor de difusión del desenfoque que se aplica.

Onda

§Difusión: define la amplitud de la onda.

§Frecuencia: permite definir cuánto deben estar cerca las ondas entre sí.

Perspectiva

§Horizontal: permite predisponer el ángulo de fuga para obtener un efecto de perspectiva hacia la derecha (con valores positivos) o hacia la izquierda (con valores negativos).

§Vertical: permite predisponer el ángulo de fuga para obtener un efecto de perspectiva hacia abajo (con valores positivos) o hacia arriba (con valores negativos).

Distorsión

§Horizontal: permite colocar el punto hacia el cual predisponer la distorsión a lo largo de un plano horizontal, a la derecha (con valores positivos) o a la izquierda (con valores negativos).

§Vertical: permite colocar el punto hacia el cual predisponer la distorsión a lo largo de un plano vertical, arriba (con valores positivos) o abajo (con valores negativos)

Best practice:

- | Cómo trabajar con las plantillas
- | Dónde encontrar nuevas plantillas para WebSite X5

Profundización:

-

Cómo funciona el Motor de Búsqueda interno de WebSite X5


Creación de mapa

Paso 2 - Creación de mapa >

Creación de mapa

 Return to chapter overview
Mostrar/ocultar el texto oculto

Un Sitio Web puede ser definido como un conjunto estructurado de páginas web. Definir correctamente la estructura es muy importante puesto que esta determina cómo están conectadas entre sí las páginas y, de consecuencia, define los trayectos de navegación disponibles para llegar a cada información.

Una buena estructura hará que el visitante no se pierda durante la navegación, sepa siempre dónde se encuentra y alcance en pocos pasos la información que busca. Por contra, una mala estructura generará desorientación y frustración y, en el peor de los casos, llevará al usuario a abandonar el sitio web.

La ventana Creación de mapa permite por tanto definir la estructura del sitio añadiendo todas las páginas necesarias y organizándolas en niveles y subniveles. Una vez diseñado el Mapa como una estructura aún vacía de contenidos, es posible proceder a la efectiva creación de cada una de las páginas. Pulsando repetidamente el botón Siguiente se abren las páginas en el mismo orden en el que están añadidas en el Mapa. Como alternativa, es posible utilizar el Mapa para pasar directamente a la ventana del programa que permite trabajar en una página determinada. Para ello, basta hacer doble clic sobre el elemento correspondiente o también seleccionarlo y pulsar el botón Siguiente.

Pulsar para expandir/reducir Referencia: El Mapa del Sitio

En la ventana Creación de mapa la mayor parte del espacio está ocupado por la representación esquemática del Mapa que se va a construir.

Por defecto aparece una estructura conformada por una carpeta Menú que contiene la página de inicio y 3 páginas. Añadiendo niveles, páginas y separadores mediante los comandos correspondientes, los elementos se añadirán a la carpeta Menú del Mapa que irá así poco a poco tomando forma.

Si en el Paso 4 - Ajustes avanzados al sitio se le añade el motor de búsqueda interno (ver Editor de plantilla), una Página de bienvenida, un Blog, un Área Reservada (es suficiente con que solo una página haya sido configurada como página protegida), o un Carrito de la compra, a la estructura del Mapa se le añade también la carpeta Páginas Especiales con los elementos correspondientes: Buscar, Página de Bienvenida, Blog, Página de Acceso y Carrito de la compra.

Además de mostrar la estructura en árbol del Mapa, para las páginas añadidas se indica alguna información adicional como el Título completo de la página y la Descripción de la página. Como es lógico, para que se muestre esta información es necesario que haya sido introducida anteriormente mediante la ventana Propiedades de la página.
Pulsar para expandir/reducir Referencia: Los comandos de la Barra de Herramientas

Justo encima de la representación esquemática del Mapa hay disponible una barra de herramientas con los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Permiten, respectivamente, cortar, copiar y pegar las páginas seleccionadas, dentro del mismo proyecto o entre proyectos distintos. Estos comandos están presentes también en el menú contextual que se abre haciendo clic con el botón derecho del ratón sobre el Mapa.

Expandir - Reducir

Extienden y reducen el Nivel seleccionado para mostrar u ocultar las páginas que contiene.

Página no visible en el menú

Hace que el elemento referido a la página o al Nivel seleccionado no se inserte en el menú de navegación. Haciendo invisible un Nivel, automáticamente todas las páginas contenidas en él serán invisibles también. Las páginas invisibles en el Menú pueden ser utilizadas de modo útil como páginas de profundización y ser activadas mediante enlaces internos. Conviene acordarse de crear al menos un enlace que lleve a las páginas invisibles porque, de no ser así, los visitantes no podrán llegar a ellas.

Página protegida

Abre la ventana Página protegida, por medio de la cual es posible configurar la página como protegida simplemente marcando la opción Configurar esta página como protegida. Una vez hecho esto, es necesario especificar qué grupos y/o usuarios individuales podrán ver dicha página protegida, haciendo clic sobre ellos en la lista propuesta. Activar un grupo o activar a todos los usuarios pertenecientes a un grupo no es lo mismo: de hecho, solo en el primer caso, si más tarde se añadiesen nuevos usuarios al grupo, se habilitaría para ellos automáticamente la visualización de la página protegida.

Pulsar para expandir/reducir
Ventana Página protegida

Para crear nuevos grupos/usuarios, basta acceder a la ventana Gestión de acceso del Paso 4 - Ajustes avanzados.

§La Página de Inicio también se puede poner como invisible en el Menú: se aconseja hacer invisible la Página de Inicio solo cuando se tiene previsto poner el enlace que lleva a ella en otros puntos del sitio web, por ejemplo en el encabezado de la plantilla.

§Si se quiere reconstruir un menú de navegación propio, es posible hacer invisibles todas las páginas y niveles del Mapa: en estos casos, en lugar de seleccionar página por página, basta con seleccionar directamente la carpeta Menú y pulsar el botón Página no visible en el menú.

Pulsar para expandir/reducir Referencia: Los comandos para diseñar el Mapa

Los comandos para proceder a la configuración de Mapa del Sitio son:

§Nuevo nivel [CTRL+L]: esta opción permite insertar un nuevo Nivel de menú. No hay límites para el número de Niveles y de sub-niveles que se pueden introducir.

§Nueva página [CTRL+P]: crea una nueva página que se insertará automáticamente dentro del Nivel seleccionado.

§Separador: permite insertar un separador para poder organizar también visualmente los elementos de los Menús. Un separador puede ser un espacio o un título y es especialmente útil para crear menús en varias columnas (ver Estilo de menú desplegable | Elementos de menú en el Paso 4 - Ajustes avanzados).

§Eliminar [SUPR]: elimina la página, el Nivel o el separador seleccionado.

§Renombrar [F2]: permite cambiar el nombre de la Página de Inicio, de la página, del Nivel o del separador seleccionado. Es conveniente nombrar correctamente los niveles, las páginas y los separadores introducidos, ya que los elementos del Mapa serán tomados automáticamente en el Menú de navegación, como títulos de cada Página y como nombres de los archivos HTML correspondientes a las páginas mismas, a no ser que se especifique lo contrario mediante la ventana Propiedades de la página.

§Mover arriba [CTRL+U] / Mover abajo [CTRL+D]: modifican el orden de las páginas, niveles y separadores, desplazando hacia arriba o hacia abajo el elemento seleccionado.

Para modificar el orden de los niveles, páginas y separadores también es posible hacerlo directamente en el Mapa: basta seleccionar el elemento que se quiere mover, arrastrarlo y soltarlo en la posición deseada (Drag&Drop). Es posible seleccionar varios niveles, páginas y/o separadores utilizando las teclas CTRL y SHIFT.

§Propiedades...: a través de la ventana que se abre, permite configurar las propiedades de la página (ventana Propiedades de la página) o del Nivel (ventana Propiedades del nivel) selecionado.

Best practice:

-

Cómo crear un Mapa y trabajar con él


Ventana Propiedades del nivel

Paso 2 - Creación de mapa > Creación de mapa >

Ventana Propiedades del nivel

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Propiedades del nivel, que se abre seleccionando un Nivel en el Mapa y pulsando el botón Propiedades..., presenta algunas opciones para definir el comportamiento del nivel en el Menú de navegación.

En WebSite X5 los niveles, a diferencia de las páginas, no tienen contenidos propios: son simples categorías, útiles para organizar las páginas y, en consecuencia, para articular el Menú de navegación en una estructura en árbol, fácil de recorrer para quien navega en el sitio web.

Pulsar para expandir/reducir Referencia: Las propiedades de los niveles

§No mostrar el menú desplegable de este nivel: activando esta opción, el Menú desplegable referido al elemento de Nivel no se muestra al paso del ratón.

§Conexión que se ejecuta haciendo clic en la opción de nivel: asocia, mediante la ventana Enlace que se abre, un enlace directo al elemento de Nivel.

Elegir "no visualizar el Menú desplegable para un Nivel" activando un "enlace con clic en la opción del mismo Nivel" es útil, por ejemplo, si se desea introducir un enlace a un sitio web externo directamente como opción de Menú, o bien, si se desea sustituir un submenú con un número elevado de opciones por la apertura de una página creada a posta para dar acceso a las distintas secciones internas.

§Icono para el elemento de menú: selecciona la imagen (archivo .JPG, .GIF, .PNG) que se mostrará en el menú de navegación, al lado de la opción referida al nivel.


Ventana Propiedades de la página

Paso 2 - Creación de mapa > Creación de mapa >

Ventana Propiedades de la página

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Propiedades de la página, que se abre seleccionando una página en el Mapa y pulsando el botón Propiedades..., presenta numerosas opciones mediante las cuales es posible definir una serie de propiedades necesarias para la optimización, para la personalización gráfica y para la inserción de posibles segmentos de código.

Las opciones disponibles están recogidas en 3 secciones: General, Gráfica y Avanzado.

Pulsar para expandir/reducir Referencia: Las opciones de la sección General

Por medio de las opciones de esta sección se pueden definir una serie de parámetros necesarios para la correcta optimización de la página:

§Título completo de la página: campo para dar a la página un título diferente del que se introdujo en el Mapa.

El nombre dado a la página en el proceso de construcción del mapa se mantendrá como elemento del menú de navegación, el posible Título completo de la página aquí especificado, en cambio, se mostrará como título efectivo de la página.

En el caso de la Página de Inicio, el título no se muestra dentro de la página pero es posible de todos modos especificar el Título completo de la página: el título se usa siempre en el menú, mientras que el título, o, si lo hubiese, el Título completo de la página se utiliza para conformar el metatag <title> del código HTML de la página.

§Descripción de la página: campo para insertar una descripción específica para la página. La descripción de la página debe ser sintética y significativa: se inserta como valor del metatag <description> en el código HTML de la página y es utilizada por los motores de búsqueda para la indexación.

§Palabras clave para la búsqueda: campo para introducir una lista de palabras clave (separadas entre sí por una coma) que sean relevantes para la página. Las palabras clave son introducidas como valor del metatag <keywords> en el código HTML de la página y son utilizadas por los motores de búsqueda para la indexación.

§Nombre del archivo: campo para introducir el nombre del archivo HTML de la página.

Si no se establece otra cosa, como nombre del archivo HTML se toma automáticamente el nombre dado a la página durante la construcción del Mapa. Dar nombres breves y significativos a los archivos permite obtener direcciones simples y fáciles de memorizar y tiene resultados positivos también en la indexación por parte de los motores de búsqueda. Esta opción no está disponible para la Página de Inicio.
Pulsar para expandir/reducir Referencia: Las opciones de la sección Gráfica

Mediante la opciones de esta sección se pueden configurar algunos importantes aspectos gráficos de la página en la que se está trabajando.

Ante todo, es posible hacer que la página tenga un fondo diferente al de las demás páginas del sitio web, definido por la plantilla elegida (ver Tonalidad de la plantilla). Recordamos que por fondo de la página se entiende el área externa a la página que se puede ver cuando la ventana del explorador es abierta con un tamaño superior al de la resolución del sitio web.

Las opciones para definir el Fondo de la página web solo para esta página son:

§Color Fondo: especifica el color para usar como relleno del fondo.

§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo.

§Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen se puede repetir solo en sentido horizontal, solo en sentido vertical o en ambos sentidos, de modo que ocupe todo el espacio disponible. Además es posible hacer que la imagen se adapte, es decir, que se redimensione de modo que cubra todo el fondo.

§Alineación: permite especificar cómo se debe alinear la imagen insertada como fondo de la página.

§Imagen de fondo fija: activando esta opción, la imagen insertada como fondo de la página se mantiene fija también cuando el contenido de la página se desplaza mediante la barra de scroll.

También el fondo del contenido de la página seleccionada puede ser configurado para ser diferente del de las demás páginas del sitio web, definido por la plantilla elegida (ver Tonalidad de la plantilla). En este caso es preciso utilizar las opciones -complétamente análogas a las que acabamos de ver- que hay en el apartado Contenido de la página solo para esta página.

Por último, es todavía posible configurar algunas Opciones generales:

§Icono para el elemento de menú: selecciona la imagen (archivo .JPG, .GIF, .PNG) que se mostrará en el menú de navegación, al lado del elemento referido a la página.

§Crear la Página sin aplicar la Plantilla: hace que no se aplique a la página la plantilla de estilo elegida o creada como plantilla personalizada (ver Tonalidad de la plantilla). Así pues, activando esta opción se crea la Página manteniendo solo los contenidos introducidos en ella, pero no se aplica ni la Plantilla de estilo ni el menú de navegación.

§Ancho de página: disponible solo si se ha activado la opción Crear la Página sin aplicar la Plantilla, especifica el valor en píxeles de la anchura de la página.
Pulsar para expandir/reducir Referencia: Las opciones de la sección Avanzado

Mediante la opciones de esta ventana se puede modificar manualmente el código HTML generado para la página en la que se está trabajando.

§Extensión del archivo generado: permite especificar la extensión con la que se guardará el archivo de la página. La extensión predeterminada por defecto es .html pero es posible escoger entre .PHP, .ASP, .CFM y .JSP. También el archivo index.html de la Página de Inicio puede ser guardado con una extensión distinta. Solo para las Páginas Protegidas (ver el comando [image] Página protegida en la barra de herramientas del Mapa) no es posible modificar el formato del archivo generado, que permanece necesariamente como .PHP.

§Código personalizado: define la posición en el interior del código HTML de la página en la que debe ser insertado el código personalizado: Antes de la apertura de la etiqueta HTML, Antes del cierre de la etiqueta HEAD, Propiedades de la etiqueta BODY (ej.: style, onload, etc.) (es decir dentro de la instrucción <BODY>, por ejemplo: <BODY onload="alert('Hello!')">), Antes del cierre de la etiqueta BODY, Después del cierre de la etiqueta BODY. Una vez seleccionada la posición, está disponible un campo en el que se puede teclear o pegar el segmento de código que debe ser insertado en el interior del código HTML de la página creado automáticamente por el programa.

La opción Código personalizado es útil cuando, por ejemplo, se desea vincular hojas de estilo en cascada (CSS) especiales, o bien cuando se deben lanzar eventos durante el OnLoad de la página. En particular, para el correcto funcionamiento de algunos JavaScript, que se pueden insertar mediante el Objeto HTML y Widgets, se requiere la inserción de líneas de código apropiadas, ya sea en la sección <HEAD> como en la sección <BODY> del archivo HTML de la página.

Por último, en la sección Configuración del Mapa del Sitio están recogidas algunas opciones útiles para trabajar con el SiteMap del Sitio:

§Agregar esta página al SiteMap: opción activa por defecto, incluye la página en el SiteMap del Sitio creado por el sitio web.

§Prioridad de contenidos: asigna una puntuación a la página, para indicar su importancia en relación a las otras páginas del sitio web. Este parámetro es indicado en el SiteMap del Sitio generado.

§Frecuencia de actualización: permite especificar con qué frecuencia es actualizada la página. Este parámetro es indicado en el SiteMap del Sitio generado.

Nota sobre la compatibilidad con las versiones precedentes:

A diferencia de lo que sucedía en las versiones anteriores, en esta versión 10 es posible abrir la ventana Propiedades de la página también para las Páginas Especiales que aparecen automáticamente en el Mapa tras haber añadido un motor de búsqueda interno (ver Editor de plantilla), una Página de bienvenida, un Blog, un Área Reservada o un Carrito de la compra.

Profundización:

-

El explorador web y el explorador de WebSite X5


Creación de la página

Paso 3 - Creación de la página >

Creación de la página

 Return to chapter overview
Mostrar/ocultar el texto oculto

Después de haber construido el Mapa del proyecto, se puede proceder a la creación de cada una de las páginas incluidas en el sitio web. La ventana Creación de la página permite definir la estructura de la página y efectuar la inserción de los contenidos.

La ruta de acceso y el título de la página en la que se está trabajando se indica como Página actual.

Pulsar para expandir/reducir Referencia: La Rejilla de Maquetación

Para hacer más intuitiva la maquetación de los contenidos, WebSite X5 ofrece una rejilla que, por defecto, consta de 2 filas y 2 columnas: basta arrastrar los objetos disponibles dentro de las celdas de la rejilla (un objeto por celda) para conformar la página.

Naturalmente, es posible añadir filas y columnas para disponer de un número mayor de celdas y, además, es posible definir manualmente la anchura de cada columna. Como veremos, gracias a estas posibilidades de diseño de la Rejilla y al hecho de poder disponer un Objeto también en varias celdas adyacentes, es incluso posible obtener diseños de página muy refinados.

Una aclaración importante: el uso de la Rejilla sirve únicamente al fin de simplificar y guiar la maquetación de los contenidos. Con la excepción de unos pocos casos muy concretos, representados por combinaciones de maquetados muy complejos, la rejilla de maquetación no se "traduce" como tabla en el código HTML de las páginas. En cualquier caso, la rejilla de maquetación no se verá nunca durante la navegación con el explorador de internet.

Como ya se ha dicho, cada celda de la rejilla puede contener un único Objeto pero cada Objeto puede ser dispuesto también en varias celdas adyacentes horizontal o verticalmente, de modo que ocupe un espacio mayor de la Página.

El aspecto de las celdas de la rejilla de maquetación cambia en función de los distintos estados que puede asumir:

§si contiene un Objeto que aún no ha sido construido, presenta el icono correspondiente al tipo de Objeto sobre un fondo de líneas grises oblicuas;

§si contiene un Objeto que ya ha sido construido, presenta el icono correspondiente al tipo de Objeto sobre un fondo azul degradado.

§si contiene el Objeto seleccionado, se muestran el perímetro y las manillas de selección.
Pulsar para expandir/reducir Referencia: Los comandos de la barra de herramientas

Justo encima de la rejilla de maquetación está la barra de herramientas, que ofrece los siguientes comandos:

Contenido Objeto

Abre la ventana que da la posibilidad de proceder a la creación del Objeto seleccionado en la rejilla de maquetación. La ventana que se abre es diferente según el tipo de Objeto (Texto, Imagen, etc.).

Estilo de celdas

Abre la ventana Estilo de celdas para definir el aspecto gráfico de la celda seleccionada de la rejilla de maquetación.

Asignar un delimitador al Objeto

Crea un delimitador y lo asocia al objeto seleccionado en la rejilla de maquetación. Pulsando en la flecha al lado del botón se muestra un menú con los siguientes comandos: Insertar delimitador..., Editar... y Eliminar.

Añadir fila/Añadir columna

Añaden una nueva fila o una nueva columna a la rejilla de maquetación. Pulsando sobre la flecha al lado de los botones, es posible elegir si la fila o columna debe añadirse antes o después de la celda seleccionada. Se pueden crear rejillas con un máximo de 64 filas y 12 columnas.

Eliminar fila/Eliminar columna

Eliminan la fila o la columna seleccionada de la rejilla de maquetación. Como mínimo, la rejilla de maquetación está compuesta por una única celda (1 fila x 1 columna).

El delimitador es un punto de referencia que sirve para localizar la posición de un Objeto dentro de la página: se emplea para configurar enlaces directos a ese Objeto.

Nota sobre la compatibilidad con las versiones precedentes:

En las versiones anteriores, las opciones relacionadas con los márgenes de la celda y con el alineamiento del contenido de la celda estaban disponibles a través de menús que se abrían con los botones [image] y [image] existentes en la barra de herramientas que hay sobre la rejilla de paginación. En esta versión 10, estos botones han sido retirados y las opciones están ahora incluidas en la ventana Estilo de celdas| Estilo.
Pulsar para expandir/reducir Referencia: La lista de objetos disponibles

Al lado de la rejilla de maquetación se presenta la lista de objetos disponibles. Para añadir un Objeto a una página basta seleccionar en la lista el icono que lo representa, arrastrarlo y soltarlo en la rejilla de maquetación sobre la celda que se desea que ocupe.

Los objetos disponibles son:

Objeto de Texto | Objeto Imagen | Objeto Tabla | Objeto de Galería
Objeto Vídeo/Sonido | Objeto Formulario de envío e-mail | Objeto Red Social | Objeto Libro de Visitas
Objeto Mapa | Objeto de Animación Flash | Objeto de Lista de Productos | Objeto HTML y Widgets

Una vez añadido un Objeto a la rejilla de maquetación basta seleccionarlo y pulsar el botón (o hacer doble clic sobre él) para abrir la ventana que permite su creación efectiva.

Nota sobre la compatibilidad con las versiones precedentes:

Objetos disponibles - El Objeto Libro de Visitas, el Objeto Red Social y el Objeto Mapa han sido introducidos en esta versión 10 de WebSite X5, en la versión anterior, la 9, estaban disponibles como widgets del Objeto HTML y Widgets.

Best practice:

-

Cómo configurar una página a través de la rejilla de maquetación


Objeto de Texto

Paso 3 - Creación de la página >

Objeto de Texto

 Return to chapter overview
Mostrar/ocultar el texto oculto

Aparte de las imágenes, de los vídeos y de las animaciones que se pueden utilizar, en la mayor parte de los casos, los contenidos principales de un sitio web son transmitidos a través de textos.

Escribir para internet no es lo mismo que escribir pensando en tener que ir luego a la imprenta: cada medio tiene sus peculiaridades e Internet se distingue principalmente por el soporte (el monitor de un ordenador o la pantalla de un dispositivo móvil), la modalidad de lectura que sugiere (más parecida a un rápido barrido que a una lectura secuencial) y la disponibilidad de un número potencialmente ilimitado de alternativas (tengamos en cuenta la cantidad de sitios web que se ocupan del mismo tema).

Para atraer la atención de un lector, incitarlo a leer y, en el mejor supuesto, convencerlo de los beneficios de aquello que estamos proponiendo, es necesario que los contenidos textuales sean escritos de modo que sean apropiados para la publicación en internet. Ante todo deben ofrecer contenidos interesantes y además deben hacerlo de manera concisa, no confusa y eficaz. Es preferible que lo que se expone esté dividido en párrafos breves, ya sea porque es más fácil de comprender, que porque visualmente resultará menos compacto y oprimente. Para aumentar la facilidad de lectura de los textos es importante prestar atención a la tipografía, es decir, el ajuste que se da a los caracteres para títulos, partes resaltadas, cuerpo principal, pies de texto, etc.

Reflexionar sobre estos aspectos y cuidar la redacción de los textos es sin duda muy importante para conseguir crear un sitio web que pueda ser juzgado positivamente por quienes lo visiten. Nada como un contenido poco interesante, expresado en modo aproximado y con frases llenas de errores gramaticales o de ortografía, lleva a etiquetar un sitio web como descuidado e inmerecedor de una segunda visita.

Hechas estas breves pero obligadas consideraciones sobre el tema de la escritura para la web, WebSite X5 permite componer los textos necesarios mediante un editor interno incluido y proceder a darle el formato deseado. Obviamente también es posible tomar textos ya creados con otros programas e introducirlos mediante una simple operación de copiar y pegar.

Pulsar para expandir/reducir Referencia: Los comandos del Editor de Texto

La Barra de Herramientas del editor de texto ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado. En este caso, antes de ser pegado, al texto se le quita todo el formato que tuviera asociado originalmente y asume el definido en el editor.

Insertar especial

Pega el texto que ha sido cortado o copiado con los comandos Cortar y Copiar. El texto pegado mantiene todo el formato original.

Usando los comandos Cortar, Copiar y Pegar se pueden retomar pasajes de archivos de texto creados con anterioridad en otros editores.

Deshacer [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar enlace [CTRL+L]

Establece un enlace hipertextual en la/s palabra/s seleccionada/s. En la ventana que se abre se pueden definir los ajustes del Enlace.

Insertar imagen

Inserta una imagen (en formato .JPG, .GIF, .PNG, .BMP) dentro del texto. El tamaño de las imágenes insertadas en el Objeto Texto se ajusta automáticamente si es superior al de la celda de la Rejilla de maquetación. Además, es posible cambiar libremente el tamaño las imágenes insertadas usando las manillas de selección. Para diseños de página particulares es aconsejable en cualquier caso recurrir al Objeto Imagen.

Activar código HTML

Permite introducir directamente el código HTML dentro de la página de texto. En modalidad HTML, los caracteres "<" y ">" no son interpretados como "menor" y "mayor"; lo que es introducido entre ellos es interpretado como un tag HTML.

Ajustes para el RollOver

Aplica el efecto RollOver al texto, pasándolo de estático a deslizable. En la ventana que se abre se pueden definir los ajustes del RollOver.

Adapta al ancho de la celda

Simula en el editor el aspecto que el texto asumirá en relación al tamaño de la celda de la Rejilla de maquetación que lo contiene.

Fondo claro/oscuro

Define un color claro u oscuro para el fondo del Editor: de esta manera es más sencillo, por ejemplo, redactar los textos que deben ser de color blanco para tener un contraste adecuado respecto al fondo establecido en la plantilla aplicada.

Elección de fuente - Tamaño de la fuente

Configuran el tipo de carácter que se empleará y el tamaño.

El menú desplegable propone todas las fuentes instaladas en el ordenador en que se está trabajando. Es necesario considerar que si la fuente utilizada no está instalada también en el ordenador del visitante del Sitio web, esta será sustituida automáticamente por una fuente de sistema similar a la original.

Negrita [CTRL+B] - Cursiva [CTRL+I] - Subrayado [CTRL+U]

Ponen en negrita, cursiva y subrayado el texto seleccionado.

Color del texto - Color del fondo del texto

Especifican el color que se aplicará al texto seleccionado o al fondo del texto seleccionado.

Listado de viñetas

Crea una lista de elementos.

Aumentar sangría / Reducir sangría

Aumentan y reducen la sangría del párrafo seleccionado.

Alinear a la izquierda - Centrar - Alinear a la derecha - Justificar

Alínean a la izquierda, al centro, a la derecha o justifican el texto seleccionado.

Disponer texto a la derecha - Disposición normal - Disponer texto a la izquierda

Activos cuando se selecciona una imagen insertada en el texto, definen la posición del texto respecto a la imagen, haciendo que discurra al lado derecho/izquierdo de la imagen o dejando que la imagen permanezca insertada en el fluir del texto como si fuese una palabra más.

Pulsando con el botón derecho del ratón es posible abrir un menú contextual que ofrece los siguientes comandos: Deshacer, Cortar, Copiar, Pegar, Insertar especial y Seleccionar todo.


Ventana RollOver

Paso 3 - Creación de la página > Objeto de Texto >

Ventana RollOver

 Return to chapter overview
Mostrar/ocultar el texto oculto

Por medio de los comandos de esta ventana, que se abre con el botón [image] del editor del Objeto de Texto o del Objeto Tabla, se definen los ajustes para el RollOver de los textos.

Pulsar para expandir/reducir Referencia: Los ajustes para el RollOver

En primer lugar, es preciso activar el efecto seleccionando la opción Habilitar RollOver.

Un vez activado el efecto, es posible definir cómo debe presentarse mediante las opciones de recuadro Modalidad:

§Movimiento: define el tipo de desplazamiento del texto. Es posible elegir entre las siguientes opciones:

Ninguno - Mostrar barra de desplazamiento: El texto no se desliza pero, puesto que se establece la altura de la celda (ver más tarde la opción Altura), si esta no es suficiente para permitir que el texto se vea completo, se incluirá automáticamente la barra de desplazamiento.

Movimiento simple: el texto se desliza en la dirección especificada y, al llegar al final, se para.

Movimiento continuo: el texto se desliza en la dirección especificada y, al llegar al final, vuelve a empezar, sin discontinuidades.

Desplazamiento alternado: el texto se desliza en la dirección especificada y, al llegar al final, se reinicia el desplazamiento en dirección opuesta.

Desplazamiento por secciones: el texto resulta prácticamente descompuesto en fichas, esto es en bloques de altura igual a lo predispuesto para la opción Altura. El deslizamiento del texto lleva a la visualización de la primera ficha, después hay una pausa antes de proceder con el deslizamiento para la visualización de la segunda ficha. Prosigue de este modo, empezando desde el principio tras la visualización de la última ficha. Para que el efecto tenga un funcionamiento óptimo es necesario que el texto esté escrito y tenga un formato tal que sea posible dividirlo en fichas predisponiendo adecuadamente la Altura.

§Dirección: define la dirección del desplazamiento del texto. El desplazamiento puede darse hacia Arriba, hacia Abajo, hacia la Izquierda o hacia la Derecha.

Además, en el recuadro Opciones están disponibles las siguientes opciones:

§Efecto: permite elegir entre los efectos Lineal, Efecto rebote y Desaceleración para todos los tipos de movimiento, excepto para el Movimiento continuo.

§Altura: define el valor de la altura de la celda que contiene el texto.

§Duración (segs.): permite predisponer cuántos segundos debe durar el efecto. En caso de que haya sido activado el Movimiento simple, el Movimiento continuo o el Desplazamiento alternado, la duración define el intervalo de tiempo en el que se desarrolla el movimiento, antes de que vuelva a empezar. En cambio, en caso de que haya sido activado el Desplazamiento por secciones, la duración define el tiempo de visualización de una ficha, antes de que se pase a la siguiente.

§Detiene el movimiento al pasar el ratón: hace que el deslizamiento del texto se interrumpa al paso del puntero del ratón.

La opción Altura está disponible solo si el RollOver predispuesto es vertical (dirección hacia arriba o hacia abajo). Ahora bien, si el RollOver es configurado con movimiento horizontal (en dirección hacia la izquierda o derecha), el efecto se visualizará mejor si el Objeto Texto ocupa la fila completa en la Rejilla de maquetación.


Objeto Imagen

Paso 3 - Creación de la página >

Objeto Imagen

 Return to chapter overview
Mostrar/ocultar el texto oculto

Las imágenes son uno de los elementos más utilizados en la creación de una página web. Entre otras cosas, pueden servir para ilustrar un concepto, para mostrar un producto, para transmitir un mensaje o, simplemente, como elemento decorativo. En cualquier caso, las imágenes son importantes porque ayudan a definir el aspecto global del sitio web y a hacer que sea percibido como algo bonito, cuidado y profesional.

WebSite X5 da la posibilidad de importar todos los formatos gráficos más importantes y pone a disposición un funcional Editor de imágenes para realizar todas las operaciones de retoque fotográfico más comunes: corte, rotación, corrección, añadido de máscaras, filtros y marcos. Además, permite trabajar las imágenes para obtener espectaculares visiones panorámicas y efectos zoom.

Es importante subrayar que WebSite X5 afronta también el problema de la copia no autorizada de las imágenes de Internet, poniendo a disposición un sistema de protección que impide acceder al archivo original y que puede contemplar la aplicación de marcas de agua e indicación de copyright.

Los comandos necesarios para proceder a la creación de un Objeto Imagen están articulados en las siguientes secciones: General, Visualización y SiteMap.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se pueden importar archivos gráficos y proceder a la edición de imágenes.

WebSite X5 permite importar todos los formatos gráficos más difundidos (.JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF) seleccionando simplemente el recurso que se desea utilizar entre los presentes en local en el ordenador o, como alternativa, en línea directamente en Internet.

La vista previa de la imagen importada se muestra en el recuadro Vista previa. Pulsando el botón Editar... que se encuentra bajo la vista previa es posible abrir el Editor de imágenes interno para editar la imagen importada.

Para la Imagen insertada se pueden definir una serie de Propiedades:

§Título: es el título de la imagen. En el código HTML de las páginas, el texto introducido aquí se asignará al atributo "title" del tag <img>.

§Texto alternativo: es el texto que se muestra como alternativa a la imagen cuando esta no puede ser visualizada. En el código HTML de las páginas, el texto introducido aquí se asignará al atributo "alt" del tag <img>.

El Título y el Texto alternativo son dos parámetros que deben ser valorados y elaborados con atención, ya que son importantes tanto para la accesibilidad como para la optimización de los sitios web.

§Enlace: predispone un enlace para la imagen. Pulsando el botón [image] se abre la ventana Enlace mediante la cual es posible elegir el tipo de acción además de la acción concreta que se desea realizar.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Visualización

Por medio de los comandos de esta sección se puede configurar cómo se mostrará la imagen importada. WebSite X5, de hecho, permite también lograr imágenes panorámicas y/o con efectos de zoom y de desplazamiento.

Los Modo de visualización disponibles son:

Redimensionamiento automático de la imagen: activa por defecto, cambia automáticamente el tamaño de la imagen para adaptarla a la celda de la Rejilla de maquetación que la contiene.

Ampliar y mover manualmente la imagen: hace que la imagen se pueda ampliar con un clic del ratón hasta alcanzar el tamaño previsto por el factor de zoom que se ha definido. Una vez ampliada, la imagen también podrá ser desplazada de modo que pase al primer plano el detalle deseado. En este caso en concreto, el desplazamiento se deberá hacer manualmente, pulsando sobre la imagen y arrastrándola hasta la posición deseada.

Para lograr este efecto el tamaño de la imagen se reduce primero al de la celda de la Rejilla de maquetación reajustándolo en función del factor que se ha definido para el zoom inicial (si se elige como Modalidad desplazamiento el Desplazamiento libre) o proporcionalmente a la Altura establecida (si se establece como Modalidad desplazamiento la opción Vista panorámica horizontal o la opción Vista panorámica vertical). De esta manera, la imagen resultará ser más grande que el área de visualización y podrá moverse en su interior.

Ampliar y mover automáticamente la imagen: análoga a la anterior opción, se distingue por el hecho de que el desplazamiento se produce simplemente acercando el ratón a los bordes de la imagen.

Seleccionando como Modo de visualización el Redimensionamiento automático de la imagen, es posible modificar los siguientes Ajustes:

§Calidad: es el nivel de calidad que se desea mantener al guardar la imagen en .JPG. Todas las imágenes importadas son automáticamente convertidas al formato .JPG o, en caso de que se predisponga una transparencia, al formato .PNG. En caso de que sean guardadas en .JPG, cuanto más alto sea el factor de compresión predispuesto, menor será la calidad mantenida.

Se recomienda insertar archivos gráficos en formato .JPG, .GIF o .PNG. Todas las imágenes insertadas con formato distinto de .JPG, .GIF y .PNG son convertidas automáticamente al formato JPG, en base al nivel de compresión especificado. La conversión a .JPG o, en el caso de las imágenes en las que se ha predispuesto una transparencia, a .PNG; se efectúa aunque la imagen tenga un tamaño mayor respecto al de la celda de la Rejilla de maquetación que la contiene y si es modificada mediante el Editor de imágenes.

En el resto de los casos la imagen será copiada tal cual es, para mantener el efecto de transparencia aplicado a las imágenes en formato GIF.

§Método de reducción: es el método que se aplica para la reducción del tamaño (ancho y alto) de las imágenes. Es posible escoger entre:

-Bilinear (más rápido): es el método de reducción más rápido pero la calidad de la imagen es inferior al de los otros métodos.

-Decimate (medio): es el método que permite obtener prestaciones intermedias en cuanto a velocidad y a calidad en relación a los otros métodos disponibles.

-Bicubic (preciso pero lento): es el método de reducción más lento pero garantiza una calidad superior en la imagen.

Seleccionando como Modo de visualización el Ampliar y mover manualmente la imagen o el Ampliar y mover automáticamente la imagen, es posible modificar los siguientes Ajustes:

§Modalidad desplazamiento: permite especificar en qué dirección se puede desplazar la imagen manual o automáticamente. Las opciones disponibles son:

-Desplazamiento libre: la imagen puede ser arrastrada tanto en sentido horizontal como vertical. En este caso es preciso especificar el valor del Zoom máx.: por ejemplo, un factor de ampliación ajustado al 200% duplica el tamaño original de la imagen.

Imagen introducida | Imagen con efecto

-Vista panorámica horizontal: la imagen puede ser arrastrada solo en sentido horizontal. Para aprovechar al máximo este efecto es preciso insertar imágenes con la base mucho mayor que la altura. En este caso es preciso especificar el valor en píxeles de la altura de la imagen en el campo Altura.

Imagen introducida | Imagen con efecto

-Vista panorámica vertical: la imagen puede ser arrastrada sólo en sentido vertical. Esta vez es preciso utilizar imágenes con una altura mucho mayor que la base y ajustar en el campo Altura el valor en píxeles de la altura que se desea mantener para la celda de la Rejilla de maquetación correspondiente.

Imagen introducida | Imagen con efecto

§Zoom máx.: disponible solo para la modalidad de desplazamiento Desplazamiento libre, permite especificar el factor de ampliación que se debe aplicar a la imagen para que pueda resultar más grande que el área en la que se mostrará. En efecto, si la imagen no fuese ampliada no podría ser arrastrada.

§Altura: disponible solo para la modalidad de desplazamiento Vista panorámica horizontal y Vista panorámica vertical, define, en el primer caso, el valor en píxeles de la altura de la imagen, y en el segundo la altura de la celda de la Rejilla de maquetación en la que se muetra la imagen.

§Amplía la imagen: activa por defecto, esta opción hace que la imagen pueda ser ampliada y reducida por el visitante mediante la ruedita del ratón. Al abrir la página, la imagen se muestra con su tamaño original y el icono presente en el ángulo inferior derecho indica la posibilidad de hacer zoom. Por medio de la ruedita del ratón la imagen se amplía hasta el factor Zoom máx. establecido.

§Mostrar la Barra de zoom: está disponible solo si se activa la opción Amplía la imagen, permite ver en la ventana Imagen una barra mediante la cual el usuario podrá regular y predisponer el zoom.

§Mostrar el navegador: pone a disposición del visitante un navegador, esto es una pequeña ventana mostrada sobre la imagen que contiene una miniatura de la imagen misma. La función del navegador es señalar mediante un recuadro la parte de la imagen que se está viendo en cada momento. Este recuadro se puede arrastrar en el navegador, hacerlo equivale a desplazar manualmente la imagen. Desplazando el ratón al exterior de la ventana Imagen, el navegador desaparece con un efecto de movimiento en salida hacia arriba.

§Activar movimiento continuo automático: hace que la imagen siga desplazándose automáticamente durante todo el tiempo en el que es visualizada. Puede ser útil para hacer entender al visitante que la imagen puede ser ampliada. El visitante puede retomar el control del movimiento usando el ratón, a la vez que puede hacer zoom usando la Barra de Zoom, si está disponible, o la ruedita del ratón.

Solo si para la imagen en la que se está trabajando ha sido configurado el Redimensionamiento automático de la imagen como Modo de visualización es posible predisponer un Efecto mouseover por paso del ratón:

§Efecto mouseover por paso del ratón: define el tipo de efecto que se debe reproducir al paso del ratón sobre la imagen, eligiéndolo entre los que se proponen.

§Ajustes: Hay varios en función del Efecto mouseover por paso del ratón seleccionado. Permiten configurar los parámetros que definen el efecto (por ejemplo, el color y el grosor del borde para el efecto "Borde coloreado").

Por último, es posible usar las opciones de Protección para intentar impedir la copia no autorizada de las imágenes:

§Proteger imagen contra copias: protege la imagen impidiendo que pueda ser fácilmente copiada usando comandos como "guardar imagen como..." que están disponibles en los menús contextuales de los diferentes exploradores.
Pulsar para expandir/reducir Referencia: Los comandos de la sección SiteMap

Por medio de los comandos de esta sección se puede especificar alguna información adicional sobre la imagen, útil para completar el SiteMap del Sitio.

Ante todo es preciso activar la opción Agregar imagen al SiteMap: con ello, el SiteMap del Sitio que crea automáticamente WebSite X5 (ver Crear un SiteMap automáticamente en Ajustes generales | Avanzado) se completa con la información referida a la imagen. Una vez hecho esto, es necesario definir los siguientes ajustes:

§Título: (parámetro opcional) especifica un título para la imagen.

§Descripción breve: (parámetro opcional) especifica una descripción o pie para la imagen.

§Posición geográfica (por ejemplo, dirección, ciudad, etc.): (parámetro opcional) especifica datos como dirección, ciudad o país, que son útiles para localizar geográficamente la imagen.

§URL de la licencia: (parámetro opcional) especifica el URL del archivo que contiene la licencia de uso de la imagen.

No es posible insertar en el SiteMap del Sitio imágenes para las que ha sido activada la protección (ver Proteger imagen contra copias en la sección anterior Visualización).

Best practice:

-

Cómo crear y conectar el Mapa del Sitio


Objeto Tabla

Paso 3 - Creación de la página >

Objeto Tabla

 Return to chapter overview
Mostrar/ocultar el texto oculto

Las tablas son una excelente herramienta para organizar y presentar datos.

En muchos casos mediante una tabla es posible resumir y presentar de manera eficaz una cantidad de datos que, de otro modo, requerirían el desarrollo de un largo y prolijo texto descriptivo. Para simplificar, una tabla con las tarifas de un hotel, clasificadas por tipo de habitación y periodo del año, es mucho más simple de leer e interpretar que un texto que describe por extenso la misma información.

Además, las tablas ofrecen también la ventaja de ser un elemento gráfico capaz de embellecer la página y de romper la monotonía de un texto largo.

Naturalmente, para que estas consideraciones mantengan su validez es necesario que las tablas estén bien estructuradas, no resulten demasiado complejas y tengan un aspecto agradable.

WebSite X5 da la posibilidad de crear tablas a través de un editor muy similar al del Objeto de Texto. Por defecto, el editor presenta una tabla predefinida compuesta por 2 filas y 3 columnas, con un ajuste de tamaño que hace que ocupe completamente la anchura de la celda de la Rejilla de maquetación que la contiene. Naturalmente, es posible añadir o eliminar filas y columnas, definir su tamaño y unir o dividir las celdas para crear tablas más o menos complejas.

Pulsar para expandir/reducir Referencia: Los comandos del Editor de Tablas

La Barra de Herramientas del editor ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado. En este caso, antes de ser pegado, al texto se le quita todo el formato que tuviera asociado originalmente y asume el definido en el editor.

Insertar especial

Pega el texto que ha sido cortado o copiado con los comandos Cortar y Copiar. El texto pegado mantiene todo el formato original.

Deshacer [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar enlace [CTRL+L]

Establece un enlace hipertextual en la/s palabra/s seleccionada/s. En la ventana que se abre se pueden definir los ajustes del Enlace.

Insertar imagen

Inserta una imagen (en formato .JPG, .GIF, .PNG, .BMP) dentro de la celda de la tabla. El tamaño de las imágenes introducidas puede ser libremente cambiado utilizando las manillas de selección.

Activar código HTML

Permite introducir directamente el código HTML dentro de la tabla. En modalidad HTML, los caracteres "<" y ">" no son interpretados como "menor" y "mayor"; lo que es introducido entre ellos es interpretado como un tag HTML.

Ajustes para el RollOver

Aplica el efecto RollOver al texto, pasándolo de estático a deslizable. En la ventana que se abre se pueden definir los ajustes del RollOver.

Fondo claro/oscuro

Define un color claro u oscuro para el fondo del Editor: de esta manera es más sencillo, por ejemplo, redactar los textos que deben ser de color blanco para tener un contraste adecuado respecto al fondo establecido en la plantilla aplicada.

Añadir fila / Eliminar fila / Añadir columna / Eliminar columna

Permiten añadir una fila o una columna después de aquella en la que está situado el cursor del ratón, o eliminar la fila o la columna en la que está situado el cursor.

Unir celdas - Dividir celdas

permiten unir varias celdas adyacentes seleccionadas de modo que formen una única celda, o dividir la celda en la que se está, creando dos celdas una junto a otra horizontalmente.

Elección de fuente - Tamaño de la fuente

Configuran el tipo de carácter que se empleará y el tamaño.

El menú desplegable propone todas las fuentes instaladas en el ordenador en que se está trabajando. Es necesario considerar que si la fuente utilizada no está instalada también en el ordenador del visitante del Sitio web, esta será sustituida automáticamente por una fuente de sistema similar a la original.

Negrita [CTRL+B] - Cursiva [CTRL+I] - Subrayado [CTRL+U]

Ponen en negrita, cursiva y subrayado el texto seleccionado.

Color del texto - Color de fondo de la celda

Especifican el color que se aplicará al texto seleccionado o al fondo de la celda del texto seleccionado.

Estilo del borde de la celda

Configura el estilo de los bordes de las celdas. Es posible definir tanto el color como el grosor de los bordes que delimitan las filas y/o las columnas de la tabla.

Listado de viñetas

Crea una lista de elementos.

Alinear a la izquierda - Centrar - Alinear a la derecha - Justificar

Alínean a la izquierda, al centro, a la derecha o justifican el texto seleccionado.

Texto a la derecha - Disposición normal - Texto a la izquierda

Activos cuando se selecciona una imagen insertada en una celda con texto, definen la posición del texto respecto a la imagen, haciendo que discurra al lado derecho/izquierdo de la imagen o dejando que la imagen permanezca insertada en el fluir del texto como si fuese una palabra más.

Alinear arriba - Alinear en el centro - Alinear abajo

Permiten alinear verticalmente el texto seleccionado: arriba, en el centro o abajo.

Pulsando el botón derecho del ratón es posible también abrir un menú contextual que además de ofrecer los comandos Deshacer, Cortar, Copiar, Pegar, Insertar especial y Seleccionar todo, presenta también los siguientes comandos:

§Altura filas

Permite definir por medio de la ventana que se abre el valor en píxeles de la altura de las filas seleccionadas. Predisponiendo como valor 0, las filas asumen automáticamente la altura mínima necesaria para visualizar el contenido introducido.

§Anchura columnas

Permite definir por medio de la ventana que se abre el valor en píxeles de la anchura de las columnas seleccionadas.

Los tamaños de las filas, de las columnas o de cada una de las celdas pueden ser modificados también colocando el ratón sobre los bordes y arrastrándolos hasta la posición deseada manteniendo pulsada la tecla izquierda del ratón. Seleccionando una celda y desplazando su borde izquierdo y/o derecho se modifica sólo el tamaño de la celda en cuestión.


Objeto de Galería

Paso 3 - Creación de la página >

Objeto de Galería

 Return to chapter overview
Mostrar/ocultar el texto oculto

La increíble difusión de las cámaras fotográficas digitales y de los servicios en línea hace extraordinariamente simple publicar y compartir colecciones enteras de fotografías a través de la Web. Así, es posible publicar las fotos de familia para que las vean parientes y amigos lejanos, o bien crear álbumes y catálogos por afición o por razones de trabajo.

Con WebSite X5 es posible incluir galerías asombrosas a través de las que enseñar no solo nuestras fotografías, sino también nuestros vídeos. Cada Galería adopta efectos y métodos de navegación y visualización diferentes: por ejemplo, pueden presentar una barra de control, una secuencia o una rejilla de miniaturas. Independientemente del tipo que sean, todas las galerías utilizan JavaScript y se sirven específicamente del HTML5 y CSS3 para la realización de los efectos de visualización.

Nota sobre la compatibilidad con las versiones precedentes:

Galerías en HTML5 -vs- Galerías en Flash - Las galerías en HTML5 han sido introducidas con la versión 9.1 de WebSite X5, y en esta versión 10 sustituyen completamente a las viejas galerías en Flash.

El paso a las galerías en HTML5 ha sido dictado por el hecho de que las galerías en Flash, pese a permitir un gran número de efectos de visualización, requieren la instalación del Flash Player para su visualización y no son compatibles con los dispositivos tablet y móviles con sistema operativo iOS (por ejemplo, iPad® e iPhone®). Por otra parte, las galerías en HTML5 se cargan más rápidamente, no requieren ningún plug-in y se pueden visualizar correctamente en cualquier tipo de dispositivo y sistema operativo moderno.

En versiones del explorador de internet no compatibles con HTML5 y CSS3, las galerías en HTML5 funcionan correctamente pero podría suceder que no se reprodujesen todos los efectos visuales aplicados a las imágenes. En estos casos, los efectos visuales no compatibles se sustituyen automáticamente con el efecto Difuminado.

Solo en el caso de que la galería incluya un vídeo en un formato no compatible con HTML5 o el explorador no sea compatible con la inclusión del vídeo en HTML5, este será gestionado automáticamente en Flash para permitir su correcta reproducción.

Algunas de las galerías disponibles proponen una rejilla o tira de miniaturas y utilizan la ventana ShowBox para mostrar las ampliaciones de las imágenes correspondientes. En estos casos, el visitante debe pulsar sobre una miniatura y se abrirá la imagen o el vídeo correspondiente en una ventana adicional superpuesta a la página principal. A continuación, colocando el ratón sobre la imagen abierta aparecen visualizados los botones que permiten al visitante pasar directamente a la imagen precedente/siguiente sin tener que regresar a las miniaturas.

La apariencia de la ventana de ShowBox se puede personalizar completamente a través de las opciones que hay en la sección Estilos y Modelos | ShowBox del Paso 4 - Ajustes avanzados.

Los comandos necesrios para proceder a la creación de un Objeto de Galería están divididos en las siguientes secciones: Estilo, Lista y Miniaturas.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo

Por medio de los comandos de esta sección se puede elegir el tipo de galería que se quiere realizar y definir sus ajustes generales.

Las galerías disponibles son las siguientes:

Pulsar para expandir/reducir | Presentación clásica Es una galería en la que las imágenes y los vídeos se presentan en una secuencia, uno tras otro. Si se opta por este tipo, la modalidad de visualización de las imágenes depende del tipo de efecto de entrada. El paso de una imagen a otra puede ser dirigido con los comandos de la Barra de Controles. Dentro de la Barra de Controles es posible incluir la visualización de pequeñas miniaturas para permitir al visitante abrir inmediatamente las imágenes o los vídeos que le interesen.
Pulsar para expandir/reducir | Galería horizontal En esta Galería se propone una serie de miniaturas, colocadas en sentido horizontal encima o debajo de la imagen en primer plano. Basta con situar el ratón sobre las miniaturas para que estas se desplacen a derecha o izquierda. Pulsando en una miniatura, la imagen o el vídeo correspondiente se muestra en primer plano. Las imágenes ampliadas son visualizadas en función del efecto de entrada que se hubiese configurado.
Pulsar para expandir/reducir | Galería vertical Análoga a la que acabamos de ver, esta galería se distingue solo por el hecho de que las miniaturas se muestran en vertical, a la derecho o a la izquierda de la imagen en primer plano.
Pulsar para expandir/reducir | Miniaturas También en esta galería se presenta una rejilla con todas las miniaturas. Pulsando sobre una miniatura, la imagen o el vídeo correspondiente se abre en primer plano en la ventana ShowBox.
Pulsar para expandir/reducir | Miniaturas por recuadro Esta galería es análoga a la anterior, pero, sobre todo en el caso en el que las imágenes incluidas sean muchas, permite dividirlas en fichas, siendo posible definir el número máximo de filas de miniaturas que se pueden visualizar. El visitante podrá pasar de una ficha a otra, permaneciendo siempre en la misma página del sitio web, mediante una botonera al efecto.
Pulsar para expandir/reducir | Miniaturas horizontales En esta galería aparece una única tira horizontal de miniaturas. Pulsando sobre una miniatura, la imagen o el vídeo es visualizado mediante la ventana ShowBox.
Pulsar para expandir/reducir | Miniaturas verticales Análoga a la anterior, esta galería se distingue solo por el hecho de que las miniaturas se muestran en vertical.

Según el tipo de galería seleccionado, se ofrecen Ajustes y opciones para gestionar los diferentes Comandos de navegación .

Ajustes: | Presentación clásica | Galería horizontal | Galería vertical
§Tamaño máximo define el tamaño máximo en píxeles de la anchura y la altura que las imágenes pueden asumir. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto. | P | P | P
§Miniaturas visibles: permite predisponer el número de miniaturas que deben ser visualizadas junto a la imagen principal. | - | P | P
§Posición de las miniaturas: permite definir dónde se deben visualizar las miniaturas respecto a la imagen principal. | - | P | P
§Fuente de la descripcióndefine el tipo de carácter, el estilo y el tamaño del texto. Estos formatos se emplearán para las descripciones breves creadas con el campo Descripción de la sección Lista. | P | P | P
§Banda sonora: predispone un archivo musical para reproducirlo como banda sonora durante la visualización de la galería. | P | P | P
§Reproducción automática: hace que la reproducción de imágenes y vídeos empiece automáticamente nada más se muestre la Galería. | P | P | P
§Visualizar en orden casual: hace que las imágenes y los vídeos sean presentados no en función del orden de inserción, sino en base a una secuencia determinada aleatoriamente. | P | P | P
Comandos de navegación:
§Visualización de los botones define si se deben mostrar botones de navegación directamente a los lados de la imagen principal de la galería, y cómo lo harán, para permitir al visitante pasar a la siguiente o a la anterior. Es posible hacer que estos botones sean Siempre visibles, No visibles (arranque automático) o Visibles mediante el paso del puntero del ratón. | P | - | -
§Estilo de los botones establece el estilo de los botones que se muestran justo a los lados de la imagen principal de la galería, eligiendo entre los aspectos gráficos sugeridos. | P | - | -
§Mostrar barra de controles: activada por defecto, permite predisponer la visualización al paso del ratón de una Barra de Controles mediante la cual el visitante podrá controlar la navegación entre las imágenes y los vídeos de la galería. En su forma básica, la Barra de Controles presenta los botones [image] Iniciar la presentación, [image] Imagen anterior y [image] Imagen siguiente. | P | P | P
§Color: especifica el color de fondo de la Barra de Controles. | P | P | P
§Mostrar miniaturas en la barra de controles: activa por defecto, esta opción añade una tira de miniaturas de las imágenes de la galería en la Barra de Controles que se muestra al paso del ratón. De este modo, el visitante no está obligado a consultar las imágenes en secuencia sino que puede visualizar inmediatamente las imágenes o los vídeos que más le interesan. | P | - | -

Ajustes: | Miniaturas | Miniaturas por recuadro | Miniaturas horizontales | Miniaturas verticales
§Miniaturas visibles: define el número de miniaturas que se mostrarán. | P | - | P | P
§Filas por página: define el número de filas de la matriz en la que las miniaturas se organizarán. | - | P | - | -
§Mostrar imagen ampliada al hacer clic en ShowBox: activa en las miniaturas el enlace para la visualización en la ventana ShowBox de la imagen o del vídeo correspondiente. | P | P | P | P
§Tamaño máximo disponible solamente en caso de que esté activa la opción Mostrar imagen ampliada al hacer clic en ShowBox, define el tamaño máximo en píxeles del ancho y el alto de la ventana ShowBox. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto. | P | P | P | P
Pulsar para expandir/reducir Referencia: Los comandos de la sección Lista

Por medio de los comandos de esta sección se elabora la lista de imágenes y vídeos que se añadirán a la galería.

Todos los archivos ya importados se muestran en la Lista de archivos: al seleccionar un archivo de la lista, se podrá ver su vista previa en una ventana adicional.

En la Lista de archivos, para cada imagen y vídeo introducido, se indica la ruta de acceso del archivo, el efecto de aparición que se hubiese aplicado, una marca de selección para indicar la asociación de un enlace, y una descripción.

Los comandos disponibles para conformar el Objeto Galería son:

§Agregar... / Eliminar: añaden nuevos archivos o eliminan los seleccionados de entre los que fueron añadidos. Pueden ser importados archivos gráficos en los siguientes formatos: .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. Además, pueden ser importados archivos de vídeo en los formatos: .FLV y .MP4.

Pulsando sobre el triangulito que hay en el botón Agregar... es posible visualizar un submenú con las siguientes opciones: Agregar imagen..., Agregar vídeo... y Agregar vídeo de YouTube/Vimeo....

Pulsar para expandir/reducir

Mediante la ventana que se abre con el comando Agregar vídeo de YouTube/Vimeo... es posible especificar la dirección URL del vídeo publicado en portales como YouTube™ o Vimeo que se quiere insertar.

§Subir / Bajar: modifican el orden de visualización de los archivos ya añadidos en la Lista de archivos, desplazando hacia arriba o hacia abajo el archivo seleccionado.

§Editar...: abre el Editor de imágenes interno para editar la imagen seleccionada de la Lista de archivos.

En función del tipo de galería elegida, para cada imagen/vídeo añadido puede ser posible definir algunas Opciones:

§Enlace: establece un enlace en la imagen/vídeo seleccionado de la Lista de archivos. Pulsando sobre el botón [image] se abre la ventana Enlace mediante la que es posible elegir el tipo de acción además de las opciones relacionadas. En el caso de las galerías que usan miniaturas, el enlace así añadido sustituye a al de la imagen ampliada, aunque esté activada la opción Mostrar imagen ampliada al hacer clic en ShowBox.

§Efecto: asocia, mediante la ventana Propiedades de los efectos que se abre pulsando el botón [image] un efecto de entrada, movimiento y zoom a la imagen o vídeo seleccionados de entre los que hay en la Lista de archivos.

En versiones del explorador de internet no compatibles con HTML5 y CSS3, las galerías en HTML5 funcionan correctamente pero podría suceder que no se reprodujesen todos los efectos visuales aplicados a las imágenes. En estos casos, los efectos visuales no compatibles se sustituyen automáticamente con el efecto Difuminado.

§Descripción: campo para introducir un texto descriptivo para la imagen o vídeo seleccionado de la Lista de archivos. El texto de la descripción aparece en la parte inferior de la ventana que muestra la imagen o el vídeo ampliado.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Miniaturas

Por medio de los comandos de esta sección se define el aspecto gráfico de las miniaturas de las galerías en las que las hay.

La miniatura es una versión reducida de la imagen o del vídeo introducido en la galería y es creada automáticamente por el Programa. Para hacerlas más bonitas, las miniaturas se presentan dentro de marcos que las hacen similares a diapositivas, fotogramas de una película, post-it, etc.

Para definir el aspecto de las miniaturas se puede utilizar:

§Imagen predeterminada: propone una lista de marcos predefinidos, de los que se puede seleccionar el que se desea aplicar a las miniaturas.

§Imagen personalizada: permite abrir el archivo gráfico (en formato .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) correspondiente al marco que se desea utilizar.

Para crear un nuevo marco basta preparar la imagen y guardarla en un archivo para este fin: es preferible que la imagen del marco sea cuadrada y, si es necesario mantener una transparencia externa, guardarla en formato .PNG.

Para las miniaturas también es posible modificar las siguientes Opciones:

§Margen externo a la imagen (%): esta opción permite definir el margen que se deberá guardar entre la imagen de la miniatura y los bordes del marco.

§Activar variación de color: especifica la tonalidad del color del marco de las miniaturas. Básicamente se aplica un efecto "coloreado" a la imagen del marco para cambiarla hacia el color deseado.

El efecto referido a la variante de color puede ser de utilidad solo para marcos que no sean de color blanco o negro: en estos casos, de hecho, el "coloreado" no aporta ninguna variación de tono.

Las galerías pueden abrirse también mediante un enlace al efecto insertado dentro de las páginas: para más información, ver Enlace.


Objeto Vídeo/Sonido

Paso 3 - Creación de la página >

Objeto Vídeo/Sonido

 Return to chapter overview
Mostrar/ocultar el texto oculto

Con WebSite X5 es posible crear sitios capaces también de entretener agradablemente a los usuarios proponiendo, por ejemplo, vídeos y temas musicales.

Hoy en día los vídeos están conociendo un grado de difusión impensable hasta hace poco tiempo. Hacer un vídeo, pasarlo al ordenador, editarlo y luego ponerlo en línea se ha convertido en un proceso al alcance de cualquiera.

Con WebSite X5 es posible importar de manera muy simple cualquier tipo de vídeo, introducirlo en el propio sitio web y, de este modo, compartirlo. WebSite X5 acepta todos los principales formatos y utiliza un reproductor interno para la reproducción de archivos .FLV y .MP4. Permite importar tanto archivos locales como archivos ya publicados en línea, incluidos aquellos de portales como YouTube™ y Vimeo.

Los comandos necesrios para proceder a la creación de un Objeto Vídeo/Sonido están divididos en las siguientes secciones: General y SiteMap.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se puede importar el archivo que se desea utilizar para la creación del Objeto Vídeo/Sonido y definir algunos ajustes relativos a la modalidad de reproducción.

El Objeto Vídeo/Sonido puede ser insertado de diferentes maneras dependiendo de dónde esté el recurso a importar:

§Archivo local en PC: si se activa esta opción, basta pulsar el botón [image] para explorar los recursos disponibles localmente en el PC y señalar los archivos en formato .MP4, .WEBM, .OGG, .FLV, .AVI, .WMV, .MPG, .MOV, .MP3, .WMA, .WAV, .MID, .AIF, .M4A que que se quiere importar.

§Archivo de Internet: si se activa esta opción, es necesario introducir en el campo correspondiente la dirección URL en la que el archivo del video o del audio están disponibles en internet.

§URL de vídeo de YouTube/Vimeo: si se activa esta opción, es preciso escribir en el campo correspondiente la dirección URL de la página de portales como YouTube™ o Vimeo que contiene el Vídeo/Audio que se desea importar.

Intoduciendo de este modo un vídeo publicado en YouTube™, el tamaño original es modificado en base a los ajustes de WebSite X5. Si se quiere tener un mayor control, se aconseja importar del vídeo de YouTube™ mediante el Objeto HTML y Widgets en lugar de hacerlo con el Objeto Vídeo/Sonido.

La vista previa del Objeto Vídeo/Audio importado se puede ver en la ventana incluida, activando la opción Vista previa.

En función del formato del archivo de vídeo/audio importado, se utiliza un reproductor distinto para la reproducción. Para los archivos en formato .MP4, .WEBM y .OGG, si el explorador es compatible con los tags de vídeo de HTML5 y el codec del archivo, se emplea el soporte nativo del explorador a través del WebSite X5 Media Player. En caso contrario, y para todos los demás formatos, vale lo dicho a continuación:

Player | Archivo Vídeo | Archivo Audio
Adobe Flash Player® | .MP4 y .FLV | .MP3
Microsoft® Windows Media Player® | .AVI, .WMV y .MPG | .WAV y .WMA
QuickTime® Player | .MOV | .M4A y .AIF

Para garantizar la máxima compatibilidad, se aconseja emplear los formatos .MP4.

Independientemente del Player utilizado para la visualización/reproducción del archivo importado, es posible definir las siguientes Propiedades:

§Texto alternativo: es el texto que se muestra como alternativa al vídeo o al audio cuando estos no puede ser reproducidos.

§Tamaño: especifica el tamaño en píxeles de la anchura y la altura del vídeo o de la Barra de Controles para el sonido. Para el ancho, entre paréntesis está indicado el valor máximo que el Objeto puede asumir, en función de cómo haya sido configurada la Rejilla de maquetación. Para los sonidos, se recuerda indicándolo entre paréntesis que el valor máximo para el alto de la Barra de Controles es de 35 píxeles. El valor mínimo es de 15 píxeles. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

§Reproducción automática: establece el inicio automático de la reproducción del vídeo o del audio.

§Habilitar visualización a pantalla completa: pone a disposición en la Barra de Controles el comando para ampliar a pantalla completa la ventana en la que se reproduce el vídeo.

También es posible configurar la visualización de la Barra de controles:

§Mostrar barra de controles: permite predisponer la visualización de una botonera con todos los comandos necesarios para gestionar la reproducción del vídeo o del audio.

Solo en el caso en que para la reproducción del archivo importado se utilice el WebSite X5 Media Player, para la configuración de la Barra de controles están disponibles también las siguientes opciones:

§Ocultar automáticamente la Barra de controles: hace que la Barra de Controles se muestre solo al pasar el ratón sobre la ventana en la que se reproduce el vídeo/audio.

§Color: especifica el color de fondo de la Barra de Controles.

Para los vídeos en formato Microsoft® o QuickTime® no se utiliza el WebSite X5 Media Player y esto no permite garantizar una correcta gestión de la Barra de Controles.
Pulsar para expandir/reducir Referencia: Los comandos de la sección SiteMap

Por medio de los comandos de esta sección se puede especificar alguna información adicional sobre el vídeo, útil para completar el SiteMap del Sitio.

Ante todo es preciso activar la opción Agregar vídeo al SiteMap: con ello, el SiteMap del Sitio que crea automáticamente WebSite X5 (ver Crear un SiteMap automáticamente en Ajustes generales | Avanzado) se completa con la información referida al vídeo. Una vez hecho esto, es necesario definir los siguientes ajustes:

§Título: (parámetro obligatorio) especifica el título que se quiere asociar al vídeo. El límite impuesto por Google™ para la longitud de los títulos es de 100 caracteres.

§Descripción breve: (parámetro obligatorio) especifica un breve texto descriptivo para el vídeo. El límite impuesto por Google™ para la longitud de las descripciones es de 2048 caracteres. Las descripciones que excedan este límite se cortarán.

§Categoría: (parámetro opcional) especifica una categoría a la que el vídeo, por su contenido, puede pertenecer. Google™ establece que cada vídeo puede pertenecer a una única categoría e impone el límite para la longitud del nombre de la categoría a 256 caracteres.

§Palabras clave para la búsqueda: (parámetro opcional) permite especificar una lista de etiquetas (tags), esto es, breves descripciones de conceptos clave asociados al vídeo. Google™ establece que cada vídeo puede tener hasta un máximo de 32 tags.

§Vista previa de imagen para el vídeo: (parámetro obligatorio) especifica una imagen de vista previa para asociar al vídeo. Google™ aconseja utilizar para estas miniaturas un tamaño mínimo de 120x90 píxeles y guardarlas en formato .JPG, .PNG o .GIF.

§Fecha de publicación: (parámetro opcional) especifica la fecha de publicación del vídeo.

§Duración (segs.): (parámetro opcional) especifica la duración en segundos del vídeo. Google™ recomienda encarecidamente añadir esta información y especifica que el valor indicado debe estar comprendido entre 0 y 28800 (equivalente a 8 horas).

§Contenido apto para todos los públicos: (parámetro opcional) especifica si el contenido del vídeo es adecuado para un público menor de edad. Google™ advierte que si un vídeo no es configurado como adecuado para menores de edad, estará disponible solo para usuarios con el filtro Google SafeSearch™ desactivado. Recordamos que la función SafeSearch de Google™ filtra los sitios con contenidos sexuales o pornográficos explícitos y los elimina de los resultados de búsqueda.

Best practice:

-

Cómo crear y conectar el Mapa del Sitio


Objeto Formulario de envío e-mail

Paso 3 - Creación de la página >

Objeto Formulario de envío e-mail

 Return to chapter overview
Mostrar/ocultar el texto oculto

Navegando en Internet, ocurre a menudo que se ven páginas con formularios cuyo rellenado se solicita para el envío mediante correo electrónico de los datos recogidos. Dichos formularios son utilizados como simples módulos de contacto, para solicitar la inscripción a determinados servicios o el acceso a áreas reservadas mediante clave de acceso o, también, para realizar encuestas e investigaciones.

Cualquiera que sea la finalidad, WebSite X5 permite crear de manera muy simple un formulario de envío de correo electrónico, permitiendo especificar los campos necesarios, modificar la maquetación y el aspecto gráfico y, sobre todo, establecer cómo se debe producir el envío y la recogida de los datos.

Los comandos necesarios para proceder a la creación de un Objeto Formulario de Envío de Email están articulados en las siguientes secciones: Lista, Enviar y Estilo.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Lista

Por medio de los comandos de esta sección se puede definir la lista de campos de los que debe constar el formulario de email.

Todos los campos ya creados se muestran en la tabla-resumen que, para cada uno de ellos, indica: Nombre del campo, Tipo de campo, Ancho, si ha sido definido como Obligatorio y Descripción. Todos estos parámetros pueden ser predispuestos en la fase de creación del campo, a través de la ventana Insertar campo.

La tabla, además de resumir los principales datos de todos los campos añadidos, también es una útil herramienta de trabajo que permite varias operaciones:

§Haciendo doble clic sobre un campo, se abre la ventana Insertar campo y se puede proceder a modificarlo.

§Haciendo clic una segunda vez en un campo ya seleccionado se puede modificar su nombre: esto equivale a abrir la ventana Insertar campo y cambiar el texto añadido como etiqueta;

§Después de haber seleccionado un campo es posible utilizar los comandos de la botonera de al lado para crear una copia del mismo, eliminarlo, desplazarlo hacia arriba o hacia abajo, o modificar su configuración.

Además, mediante la tabla también es posible comprobar la disposición de los campos en el formulario. Una ligera línea discontinua indica las líneas en las que se desarrollará el formulario. Además, si un campo se sitúa al lado del anterior, junto a la indicación de su anchura se muestra el icono . Finalmente, si las anchuras de los campos definidos como situados uno al lado de otro en la misma fila exceden el 100% del espacio disponible, el icono con un signo de exclamación señalará el fallo: si no se modifican las anchuras, los Campos quedarán dispuestos en filas distintas.

Junto a la tabla se encuentran los comandos que sirven para crear la lista de los campos que conformarán el formulario:

§Agregar...: abre la ventana Insertar campo para añadir un nuevo campo dentro del formulario.

§Duplicar: crea una copia del campo seleccionado entre los ya añadidos al formulario.

§Eliminar: elimina el campo seleccionado entre los ya añadidos al formulario.

§Subir / Bajar: modifican el orden en el que se muestran los campos ya añadidos al formulario, desplazando hacia arriba o hacia abajo el campo seleccionado.

§Editar...: abre la ventana Insertar campo para modificar los ajustes del campo seleccionado entre los ya añadidos al formulario.

Los botones Enviar, para el envío del formulario rellenado y Reset, para borrar todos los datos que se hubiesen introducido en el formulario, son creados automáticamente por el programa y colocados al final del formulario.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Enviar

Por medio de los comandos de esta sección se pueden definir las modalidades de envío de los datos recogidos a través del formulario de envío de emails que se ha creado.

En el recuadro Envío de los datos se solicita especificar cómo deben ser enviados al gestor del sitio web los datos recogidos en el formulario. Es posible elegir entre las siguientes posibilidades:

Enviar los datos por e-mail: es la opción prevista por defecto. Los datos recogidos a través del formulario son enviados por email mediante un script PHP ya preestablecido.

Enviar datos a una base de datos: los datos recogidos a través del formulario son enviados automáticamente a la base de datos MySQL especificada mediante un script PHP ya preestablecido.

Enviar datos a un archivo: los datos recogidos mediante el formulario son gestionados usando el script que se especifica (PHP, ASP, etc.). Esta opción es útil si se desea utilizar un script propio, por ejemplo para enviar datos si PHP no está disponible en el propio Servidor, o bien si desean activar procedimientos y gestiones particulares.

En función del método de envío seleccionado es preciso especificar una serie de parámetros:

Enviar los datos por e-mail:

§E-mail del remitente: permite especificar qué dirección utilizar como remite del correo electrónico que es enviado con los datos recogidos mediante el formulario creado.

Por defecto, como correo electrónico del remitente se utiliza el mismo correo electrónico del destinatario que, en este caso, corresponde con el administrador del sitio web. Si se especifica usar como correo electrónico del remitente el del visitante que ha rellenado el Formulario, será posible, por ejemplo, utilizar directamente el comando "Responder" del programa de correo electrónico.

§E-mail de destino: permite especificar la dirección de correo electrónico a donde serán enviados los datos recogidos con el formulario creado. Es posible especificar más de una dirección de email. Para ello es preciso introducir todas las direcciones de email separadas por un punto y coma (;).

§Objeto: permite especificar el asunto del correo electrónico con los datos recogidos mediante el formulario creado.

§Mensaje: permite establecer el texto que en en el email servirá de introducción a los datos recogidos en el formulario.

§Incluir al final los datos recogidos en formato CSV: hace que los datos recogidos sean guardados también en un archivo en formato .CSV, incluido al final del email enviado. En un archivo .CSV los datos se registran en forma de texto, como una larga lista de elementos separados por un punto y coma (;). Estos archivos pueden ser fácilmente importados por programas procesadores de hojas de cálculo (por ejemplo Microsoft Excell).

Enviar datos a una base de datos:

§Nombre de la base de datos: especifica el nombre de la base de datos que se utilizará, escogiéndolo de la lista de aquellos vinculados al proyecto actual. La lista de las bases de datos vinculadas al proyecto debe ser previamente rellenada a través de los comandos al efecto de la ventana Gestiónde datos.

§Nombre de la tabla: en este campo se debe introducir el nombre de la tabla dentro de la base de datos en la que se quieren recoger los datos. Si se introduce el nombre de una Tabla que todavía no existe, esta será creada automáticamente.

§Envía un email de notificación de la recepción de datos: hace que se envíe automáticamente un email de notificación cuando se reciben nuevos datos.

§E-mail de destino: especifica la dirección a la que debe ser enviado el email de notificación de recepción de datos.

Enviar datos a un archivo:

§Archivo de script (por ejemplo, PHP, ASP): permite importar el archivo de elaboración que se desea utilizar para recoger los datos del formulario y enviarlos. En este caso el archivo de elaboración debe ser creado manualmente para resolver la tarea deseada.

Cuando en el recuadro E-mail de confirmación para el usuario como método de Envío de los datos no se elige Enviar datos a un archivo se presentan las siguientes opciones:

§Enviar un e-mail de confirmación al usuario: activando esta opción es posible hacer que, después de haber rellenado el formulario y de haber enviado los datos, el visitante reciba automáticamente un correo electrónico de confirmación.

§E-mail del remitente: campo para escribir una dirección de correo electrónico válida y activa que se utilizará como remite del email de confirmación.

Por defecto, como email del remitente, que en este caso es el email del administrador del sitio web, se usa la dirección introducida como E-mail de destino especificada en la sección Envío de los datos. Si se introduce un E-mail del remitente distinto, es posible enviar los emails de confirmación desde una dirección distinta de aquella en la que se reciben los correos electrónicos provenientes del formulario. Esta opción resulta útil si se prefiere utilizar para las comunicaciones con los usuarios una dirección genérica (info@miempresa.com o bien noreply@miempresa.com) en lugar de una dirección personal (nombre.apellido@miempresa.com).

§E-mail de destino: especifica de qué campos de entre los añadidos al formulario se obtiene la dirección de correo electrónico del visitante a la que se enviará el email de confirmación.

§Objeto: especifica el asunto del email de confirmación.

§Mensaje: especifica el cuerpo del mensaje del email de confirmación.

§Incluir al final los datos recogidos: permite agregar al final del correo electrónico de confirmación los datos recogidos a través del formulario rellenado.

Por último, en el recuadro Opciones se presentan las siguientes opciones:

§Activar el control anti-spam 'Captcha': añade al final del formulario de envío de email el control anti-spam Captcha. Esto hace que se introduzca la imagen de algunas letras reproducidas de manera deformada sobre un fondo confuso. El visitante deberá copiar correctamente estas letras en un campo al efecto para poder enviar el mensaje.

§Página de confirmación después del envío de los datos: muestra el Mapa del Sitio para definir qué página debe ser automáticamente mostrada una vez que el formulario ha sido compilado y los datos recogidos han sido enviados por correo electrónico. En lugar de redireccionar al usuario directamente a la página de inicio, es preferible predisponer una página específica con un mensaje de agradecimiento: esta página deberá ser definida como Página no visible en el menú mediante el comando al efecto disponible en el Paso 2 - Creación de mapa.

Para la personalización del aspecto gráfico de los emails enviados automáticamente mediante el formulario creado, es necesario usar las opciones que se ofrecen en la ventana Estilos y Modelos | E-mail del Paso 4 - Ajustes avanzados.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo

Por medio de los comandos de esta sección se pueden definir algunos de los ajustes gráficos referidos al aspecto del formulario de envío de emails que se está creando.

Ante todo es preciso seleccionar el Elemento de formulario sobre el que se desea trabajar: es posible hacerlo a través del menú desplegable de la opción homónima, o bien pulsando directamente sobre el elemento en la ventana de Vista previa disponible.

Los elementos que se pueden modificar son:

Etiquetas: es el texto de descripción del campo y sirve para especificar la información requerida o introducir el texto de la pregunta que se desea formular.

Campos: es el recuadro en el que el visitante podrá introducir la información requerida.

Botones de 'Enviar' y 'Restablecer': son los botones introducidos automáticamente al final del formulario de envío de correo electrónico. Sirven, respectivamente, para enviar todos los datos introducidos en los campos y para vaciar los campos de los valores que pudiesen contener.

Descripción y validación de campo: se trata de los mensajes mostrados para dar información adicional sobre cómo rellenar los campos, para invitar a corregir un dato introducido o para exhortar a completar un campo obligatorio dejado vacío.

En función del elemento del formulario seleccionado es posible modificar diferentes opciones presentadas en la sección Estilo:

Etiquetas:

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Color: especifica el color que se utilizará para el texto.

§Repetir: permite definir dónde se debe colocar la etiqueta respecto al campo. Es posible escoger entre tres alternativas: Mostrar etiquetas sobre los campos, Mostrar etiquetas dentro de los campos y Mostrar etiquetas a la izquierda de los campos. Si se escoge colocar la etiqueta a la izquierda de los campos es posible definir el Ancho (%), es decir el porcentaje del espacio de la fila que deberá ser ocupado por la etiqueta misma, y la Alineación del texto de la etiqueta.

Campos:

§Color: especifica el color que se debe utilizar para el texto (en el estado normal y "en selección"), para el fondo (en el estado normal y "en selección") y para el borde (en el estado normal y "en error").

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra dentro de los campos para dar una sensación de profundidad.

Botones de 'Enviar' y 'Restablecer':

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Color: especifica el color que se debe utilizar para el texto, para el fondo y para la borde de los botones.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Imagen de fondo: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo.

§Mostrar el botón 'Restablecer': activada por defecto, hace que al final del formulario se añada automáticamente también el botón "Restablecer" (que sirve para vaciar los campos ya rellenados) además del botón "Enviar".

Descripción y validación de campo:

§Archivo de icono de descripción del campo: permite importar un archivo gráfico (formato .JPG, .GIF y .PNG) para utilizarlo como icono que poner al lado del campo para indicar que hay más información disponible.

§Mostrar la descripción al seleccionar el campo: activando esta opción aparece visualizado automáticamente el mensaje con la información adicional, en cuanto se hace clic dentro del Campo.

§Si se produce un error durante la validación de datos: permite elegir cómo debe ser mostrado el mensaje previsto en el caso en el que un campo no haya sido rellenado correctamente o, si está definido como obligatorio, se haya dejado vacío. Es posible elegir una de las siguientes opciones: Mostrar la ventana de diálogo del navegador, Mostrar ventana de popup interna o Mostrar sugerencia al lado de campo no válido.

Cuando se prueba localmente el funcionamiento de la página web creada, una ventana de aviso advierte que los emails con los datos recogidos en el módulo no serán enviados. El módulo Envío de email funciona plenamente solo tras la publicación de la página web en el Server.

Para el funcionamiento correcto del formulario de envío de correo electrónico es necesario que el Servidor en el que será publicado el sitio web admita el lenguaje de programación .PHP y que esté activo el comando MAIL. A través de la sección WebSite Test del Panel de control en línea es posible obtener esta información de diagnóstico acerca del Servidor.

Si se verifican problemas en el envío de los correos, es probable que el Servidor utilizado no esté configurado de modo estándar. En estos casos es aconsejable intentar modificar la configuración referida al script y al método utilizado para el envío de emails mediante las opciones presentes en Ajustes avanzados | Gestiónde datos. Para más información al respecto, ponerse en contacto con el propio proveedor de espacio web.


Ventana Insertar campo

Paso 3 - Creación de la página > Objeto Formulario de envío e-mail >

Ventana Insertar campo

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Insertar campo, que se abre con los botones Agregar... y Editar... de la ventana Objeto Formulario de envío e-mail, permite proceder a la creación y definición efectiva de los campos que conformarán el formulario de envío de emails.

Esta ventana presenta las siguientes secciones: Tipo de campo y Opciones.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Tipo de campo

Por medio de las opciones de esta sección se puede crear la lista de campos de los que debe constar el formulario de envío de emails.

Los tipos de campo entre los que se puede elegir son:

Campo de texto: campo de texto dispuesto en una sola fila que se muestra como un recuadro vacío dentro del cual el usuario puede escribir libremente la respuesta que considere más oportuna.

E-mail: campo de texto específico para solicitar al visitante que proporcione una dirección de correo electrónico. En estos casos, se aplica automáticamente un filtro para comprobar la exactitud del dato introducido: por ejemplo, para ser considerado válido, una dirección debe contener el carácter "@" y presentar un punto en el texto que sigue.

Área de texto: campo de texto dispuesto en varias filas específico para permitir que el visitante deje un comentario o formule una pregunta.

Fecha: campo de texto específico para pedir al visitante que indique una fecha. La fecha solicitada puede ser escrita o introducida mediante un calendario.

Lista desplegable: las respuestas posibles están presentadas en un listado desplegable en donde el visitante puede escoger solamente una.

Lista: las respuestas posibles, de las que el visitante puede escoger solamente una, están presentadas como elementos de una lista.

Elección múltiple: las posibles respuestas, entre las que el visitante puede seleccionar incluso más de una, se presentan una tras otra, como una lista de opciones.

Elección única: las posibles respuestas, entre las que el visitante puede seleccionar solo una, se presentan una tras otra, como una lista de opciones.

Contraseña: campo de texto en el que los caracteres introducidos son automáticamente ocultados, o sea, visualizados como "puntos" o asteriscos (según al sistema operativo en uso). Es útil para permitir a los visitantes establecer la contraseña con la que desean registrarse para acceder a un servicio.

Archivo adjunto: campo de texto en el que el visitante, por medio del botón [image] para explorar los recursos disponibles, puede especificar el archivo que desea enviar adjunto al mensaje.

Para el correcto funcionamiento de los archivos adjuntos es necesario ponerse en contacto con el propio proveedor del espacio web para verificar que el servicio esté activo.

Pregunta de control: campo de texto en el que el visitante debe escribir la respuesta a una pregunta formulada con la intención de discriminar entre usuarios reales y programas que aprovechan los formularios de contacto publicados en línea para el envío de correo no deseado.

Condiciones de aceptación: campo de texto en el que se presentan las condiciones que el visitante debe aceptar para proceder al envío de los datos. Dicho campo puede ser utilizado, por ejemplo, para presentar las normas que se respetan para la tutela de la privacidad en el tratamiento de los datos recogidos.

Separador: no es un campo sino un separador gráfico que sirve para organizar los campos en secciones y así hacer más manejables los formularios largos que requieren la introducción de mucha información.

En función del tipo de campo seleccionado, se presentan distintas opciones configurables. Las opciones comunes a todos los campos son:

§Etiqueta: define la descripción que se asociará al campo. Este texto aparecerá encima, al lado o dentro del campo al que hace referencia y debe ser utilizado para especificar la información solicitada o para presentar el texto de la pregunta que se desea hacer al visitante.

§Ancho (%): define la anchura del campo, puede tomar un valor variable entre el 5% y el 100% del espacio disponible.

§Mostrar en la misma fila que el campo anterior: hace que el campo no ocupe una nueva fila sino que se sitúe al lado del campo inmediatamente anterior. Juntar dos campos en la misma fila es posible solo si tienen anchuras que sumadas no superen el 100% del espacio disponible.

§Póngase como campo obligatorio: hace que sea obligatorio introducir una respuesta. Esta opción no está disponible para los campos Elección múltiple y está activada por defecto para los campos Pregunta de control.

Además de las opciones comunes, para cada tipo de campo se añaden las siguientes opciones específicas:

Campo de texto:

§Número máx. de caracteres: especifica el número máximo de caracteres que se pueden introducir en el campo.

Por ejemplo, se puede fijar en 9 el número máximo de caracteres para un campo de texto destinado a recoger el Número de Identificación Fiscal del visitante.

§Filtro sobre la inserción del texto: establece un control sobre la corrección de los datos introducidos por el visitante en el campo. Es posible elegir entre los siguientes filtros:

-Ninguno (caracteres y números): son aceptados números y caracteres.

-Sólo números: solamente son aceptados caracteres numéricos.

-Número de teléfono/fax (números y caracteres '-' y ' '): acepta caracteres numéricos, el carácter "-" y el espacio.

-Fecha (números y caracteres '/' y '.'): acepta caracteres numéricos y el carácter "/".

E-mail:

§Solicitar confirmación de dirección de e-mail: añade automáticamente un campo donde el visitante debe escribir una segunda vez su dirección de correo electrónico. Se verificará la correspondencia exacta de la dirección de correo electrónico escrita en los dos campos y, si es necesario, aparecerá un mensaje de aviso.

Área de texto:

§Número máx. de caracteres: especifica el número máximo de caracteres que se pueden introducir en el campo.

§Número filas: define el alto del campo, especificando el número de filas mostradas (con un máximo de 30).

Fecha:

§Formato de fecha: permite elegir qué formato debe tener la fecha introducida, eligiendo entre los formatos habituales nacionales e internacionales.

§Mostrar icono de 'Calendario': muestra junto al campo Fecha el icono de 'Calendario'. Pulsando sobre este icono se mostrará un calendario mediante el cual el visitante podrá introducir la fecha sin tener que teclearla.

Lista:

§Número filas: define el alto del campo, especificando el número de filas mostradas (con un máximo de 30).

Elección múltiple/Elección única:

§Número de columnas: permite definir el número de columnas en que se deben disponer las posibles modalidades de respuesta.

Contraseña:

§Solicitar confirmación de contraseña: añade automáticamente un campo donde el visitante debe escribir una segunda vez la contraseña elegida. Se verificará la correspondencia exacta de la contraseña escrita en los dos campos y, si es necesario, aparecerá un mensaje de aviso.

Pregunta de control:

§Respuesta correcta: permite especificar la respuesta correcta que será comparada con la dada por el visitante.

Condiciones de aceptación:

§Texto de la condición especifica el texto de las condiciones que el visitante deberá aceptar antes de poder proceder al envío de los datos.

Por último, para los campos Lista desplegable, Lista, Elección múltiple y Elección única es posible crear la lista de las respuestas posibles mediante los siguientes comandos:

§Agregar / Eliminar: añaden una nueva modalidad de respuesta o eliminan la modalidad de respuesta seleccionada.

§Subir / Bajar: modifican el orden en el que se muestran las respuestas posibles, desplazando hacia arriba o hacia abajo la respuesta seleccionada.

§Editar: modifica la modalidad de respuesta seleccionada. También se puede hacer clic una segunda vez en un elemento ya seleccionado para poderlo modificar.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Opciones

Por medio de las opciones presentes en esta sección se gestionan algunas propiedades avanzadas de los campos de un formulario de envío de emails.

Concretamente, las opciones avanzadas disponibles son:

§Descripción de campo: permite elaborar un mensaje que sirva, por ejemplo, para explicar al visitante qué información se solicita en el campo o cómo responder. En el caso en que esté presente, al lado del campo aparece un icono (personalizable) que indica que hay más información disponible. Pando el ratón sobre este icono, el visitante verá un tooltip con el mensaje que se hubiera predispuesto.

§atributo <name>: especifica el valor que se quiere asociar al atributo <name> del campo en el momento en que es generado el código HTML del formulario de envío de emails. Esta opción resulta útil, por ejemplo, cuando como método de Envío de los datos (ver Objeto Formulario de envío e-mail | Enviar) se ha definido Enviar datos a un archivo.

§Nombre de campo de base de datos: permite especificar el nombre que se quiere atribuir al campo para que el dato recogido pueda ser correctamente reconocido e insertado dentro de una base de datos. Esta opción resulta útil, por ejemplo, cuando como método de Envío de los datos (ver Objeto Formulario de envío e-mail | Enviar) se ha definido Enviar datos a una base de datos.


Objeto Red Social

Paso 3 - Creación de la página >

Objeto Red Social

 Return to chapter overview
Mostrar/ocultar el texto oculto

Es probable que cada uno de nosotros ya forme parte de una o más redes sociales: compartiendo mensajes, fotos, vídeos o cualquier otro contenido, construimos nuestro perfil en línea, trabamos relaciones y ensanchamos constantemente nuestro círculo de contactos.

Si en este momento la mayor parte de la gente está interaccionando en línea en las redes sociales, es importante lograr hacer dialogar el sitio web con los perfiles en los diferentes canales sociales abiertos. WebSite X5 da la posibilidad de obtener este resultado por medio del Objeto Red Social que se sirve de los plug-in que ofrecen algunas de las redes sociales más conocidas: Facebook, Google+, Twitter, Pinterest. Como es lógico, los resultados que se pueden alcanzar varían en función del plug-in elegido, pero en líneas generales todos tienen el objetivo de transformar los visitantes del sitio web en nuevos contactos en las redes sociales, estimulando que se compartan los contenidos que el sitio ofrece.

Pulsar para expandir/reducir Referencia: Las redes sociales disponibles

Lo primero que es preciso hacer es seleccionar de la lista Red Social el elemento que queremos insertar. Las opciones disponibles son:

§AddThis - Botonoes 'Compartir': añade una barra de botones y/o un menú que el visitante podrá utilizar para seleccionar una red social en la que compartir los contenidos que se ofrecen con su círculo de contactos.

Para más información sobre el funcionamiento del plug-in social de AddThis, ver http://www.addthis.com/social-plugins

§Facebook - Recuadro de Comentarios: inserta un recuadro de Facebook mediante el que los visitantes pueden dejar sus comentarios.

§Facebook - Recuadro 'Me gusta': inserta un recuadro que permite a los visitantes leer los últimos mensajes publicados en una página de Facebook y pulsar directamente sobre el botón "Me gusta" para seguirla.

§Facebook - Botón 'Me gusta': inserta el botón "Me gusta". Pulsándolo, los visitantes pueden compartir los contenidos de su agrado con sus amigos en Facebook.

Para más información sobre el funcionamiento los plugines sociales de Facebook, ver https://developers.facebook.com/docs/plugins/

§Google Plus - Botón 'Plus 1': inserta el botón "Seguir". Pulsando este botón, los visitantes recomiendan en Google Search los contenidos que les agradan y los comparten en Google+.

§Google Plus - Badge: inserta un badge que permite a los visitantes descubrir el perfil en Google+ de una persona y, si quieren, seguirla.

§Google Plus - Icono: inserta un botón que permite a los visitantes descubrir el perfil en Google+ de una persona y, si quieren, seguirla.

Para más información sobre el funcionamiento de los plugines sociales de Google+, ver https://developers.google.com/+/plugins/

§Twitter- Botón 'Twittear': inserta el botón "Twittear". Pulsándolo, los visitantes comparten el sitio con todas las personas que los siguen en Twitter.

§Twitter - Recuadro Cuenta: inserta un recuadro que permite a los visitantes leer los últimos tweets (mensajes) publicados en una cuenta de Twitter y, si quieren, participar en la conversación.

§Twitter- Botón 'Seguir': inserta el botón "Seguir". Pulsándolo, los visitantes empezarán a seguir una cuenta de Twitter.

Para más información sobre el funcionamiento de los plugines sociales de Twitter+, ver https://dev.twitter.com/docs/twitter-for-websites

§Pinterest - Botón 'Seguir': inserta el botón "Seguir". Pulsándolo, los visitantes empezarán a seguir una cuenta de Pinterest.

§Pinterest - Botón 'Pin It': inserta el botón "Pin It". Pulsándolo, los visitantes pueden compartir los contenidos de su agrado en Pinterest.

Para más información sobre el funcionamiento de los plugines sociales de Pinterest, ver http://pinterest.com/about/goodies/
Pulsar para expandir/reducir Referencia: Los ajustes que se pueden usar

Naturalmente, para cada elemento seleccionado de la lista Red Social hay disponibles unos Ajustes específicos, mediante los que es posible definir su aspecto y su funcionamiento. Aparte de las opciones puramente gráficas, los parámetros a los que es necesario prestar especial atención son los siguientes:

AddThis - Botonoes 'Compartir'

§Nombre del usuario: es la identificación que se obtiene abriendo una cuenta en AddThis. Si como administradores del sitio web disponemos de una cuenta en AddThis, es recomendable especificarlo aquí para poder consultar estadísticas del uso que han hecho los visitantes del servicio.

Facebook - Recuadro de Comentarios

§URL del sitio web: especifica el URL del sitio web que los visitantes deben comentar. Por lo general, el "recuadro de comentarios" está insertado directamente en la página del sitio web que debe ser comentada por los visitantes; en este caso el URL que hay que introducir es el de la página que contiene el "recuadro de comentarios".

Facebook - Recuadro 'Me gusta'

§URL del Perfil: especifica el URL de la página de Facebook que se quiere enlazar para tomar sus contenidos y pedir a los visitantes que la sigan pulsando el botón "Me gusta".

Facebook - Botón 'Me gusta'

§URL del sitio web: especifica el URL del sitio web del que los visitantes pueden expresar que les ha gustado pulsando el botón "Me gusta".

Google Plus - Botón 'Plus 1'

§URL del sitio web: especifica el URL del sitio web que los visitantes pueden recomendar a sus amigos.

Google Plus - Badge / Google Plus - Icono

§URL del Perfil: especifica el URL del perfil de Google+ que se quiere enlazar para dar la posibilidad a los visitantes de entrar a formar parte de su círculo de amigos.

Twitter- Botón 'Twittear'

§URL del sitio web: especifica el URL del sitio web que los visitantes pueden postear en su perfil de Twitter.

Twitter - Recuadro Cuenta / Twitter- Botón 'Seguir'

§Nombre del usuario es la identificación que se obtiene abriendo un perfil en Twitter.

Pinterest - Botón 'Seguir'

§Nombre del usuario es la identificación que se obtiene abriendo un perfil en Pinterest.

Pinterest - Botón 'Pin It'

§URL del sitio web: especifica el URL del sitio web en el que se publican las imágenes que los visitantes pueden "pinear" en sus tableros de Pinterest.

§URL de la imagen: especifica el URL de la imagen que los visitantes pueden "pinear" en sus tableros de Pinterest.

Nota sobre la compatibilidad con las versiones precedentes:

En la versión anterior, la v.9, este objeto estaba disponible como widget delObjeto HTML y Widgets.


Objeto Libro de Visitas

Paso 3 - Creación de la página >

Objeto Libro de Visitas

 Return to chapter overview
Mostrar/ocultar el texto oculto

El Libro de Visitas es una utilidad que permite a los visitantes de un sitio web dejar su firma y comentarios y/o expresar una valoración. Consta de un breve formulario que los visitantes deben rellenar y de la lista de comentarios que otros visitantes han dejado.

WebSite X5 permite no solo personalizar el Libro de Visitas sino también gestionar la publicación de comentarios mediante un Panel de control en línea.

Pulsar para expandir/reducir Referencia: Los ajustes para el Libro de Visitas

Para proceder a la creación de un Libro de Visitas es preciso definir el Tipo de contenido que los visitantes del sitio web podrán dejar, eligiendo entre:

Comentario y votación: los visitantes podrán escribir un comentario y también expresar un voto.

Comentario: los visitantes podrán dejar un comentario, pero no votar.

Votación: los visitantes podrán votar pero sin dejar ningún comentario.

Dependiendo del Tipo de contenido seleccionado es posible definir algunas opciones referidas al Control de los comentarios:

§Modo de visualización: establece si los comentarios que dejan los visitantes se pueden ver online inmediatamente o si es necesario que primero sean aprobados mediante los comandos del Panel de control online.

§Orden de visualización: define en qué orden cronológico se mostrarán los comentarios publicados, si del más reciente al más antiguo o viceversa.

§Mostrar el botón 'Denunciar abuso': hace que esté a disposición de los visitantes el botón "Abuso", mediante el que pueden señalar posibles comportamientos inadecuados.

§Activar el control anti-spam 'Captcha': añade el control anti-spam Captcha al final del formulario para la publicación de un comentario. Se mostrará una imagen de algunas letras distorsionadas sobre un fondo confuso, el visitante deberá copiar correctamente estas letras en un campo al efecto para poder enviar el comentario.

§Estilo de votación: define el estilo del elemento gráfico (por ejemplo, una serie de 5 estrellitas) propuesto al visitante para que exprese su voto. Esta es la única opción disponible si se selecciona Votación como Tipo de contenido.

Para cualquier Tipo de contenido es posible modificar las siguientes Propiedades:

§Altura: establece el valor en píxeles de la altura del Objeto Libro de Visitas. Cada vez que un visitante deja un comentario y este es publicado en línea, el comentario se añade a la lista de los ya existentes. Fijando la altura del Objeto se consigue que, más allá de un cierto límite, la lista de comentarios pueda ser desplazada mediante una barra de desplazamiento, conteniendo así el alargamiento del total de la página.
Pulsar para expandir/reducir Referencia: Los métodos de envío de los datos del Libro de Visitas

En las secciones Modo de guardado de los datos es posible especificar cómo los datos recogidos a través del formulario que hay que rellenar para publicar un comentario son guardados y enviados al administrador del sitio web:

§Subcarpeta del servidor en la que guardar los datos: especifica en qué subcarpeta de la carpeta en el Servidor con acceso de escritura mediante PHP deben ser guardados los datos. La carpeta principal en el Servidor es la que se definió con la opción Carpeta de servidor con acceso de escritura que hay en la ventana Gestiónde datos. Si no e especifica ninguna subcarpeta, los datos se guardan directamente en la carpeta principal en el Servidor.

§Envía un email de notificación de la recepción de un comentario: hace que se envíe automáticamente un email de notificación cuando se reciben nuevos datos.

§E-mail de destino: especifica la dirección a la que debe ser enviado el email de notificación de recepción de datos.

Normalmente, los proveedores permiten el acceso de escritura para cualquier carpeta del Servidor, en ese caso no es necesario especificar ninguna ruta para la carpeta pública. En caso contrario, para conocer la ruta completa de la carpeta pública es necesario ponerse en contacto con el proveedor del espacio Web.

Mediante la sección Prueba WebSite del Panel de control online es posible verificar si la carpeta con acceso de escritura especificada y sus posibles subcarpetas existen y, si es así, si efectivamente consienten la escritura de datos.

Para el correcto funcionamiento del Objeto Libro de Visitas es necesario hacer que la página en la que está contenido se guarde como archivo .PHP.

Para configurar la extensión de la página se utiliza opción Extensión del archivo generado de la ventana Propiedades de la página | Avanzado.

Nota sobre la compatibilidad con las versiones precedentes:

En la versión anterior, la v.9, este objeto estaba disponible como widget delObjeto HTML y Widgets.

Best practice:

-

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea

Profundización:

-

Panel de control en línea


Objeto Mapa

Paso 3 - Creación de la página >

Objeto Mapa

 Return to chapter overview
Mostrar/ocultar el texto oculto

En los sitios web dedicados a actividades comerciales es muy habitual encontrar una página de contactos en las que aparece un mapa interactivo que muestra la ubicación de la sede de la empresa. Estos mapas son muy cómodos porque no solo comunican la dirección del lugar sino que también explican a los clientes potenciales cómo llegar hasta él.

WebSite X5 da la posibilidad de insertar un Mapa, creado sirviéndose del servicio Google Maps™, mediante el Objeto Mapa incluido.

Pulsar para expandir/reducir Referencia: Los ajustes para crear un Mapa interactivo

Las Ajustes que hay que definir para configurar un mapa interactivo son:

§Dirección: es la dirección que se indicará en el mapa.

§Visualización: especifica cómo debe ser visualizado el mapa, eligiendo entre mapa, satélite y terreno.

§Idioma: especifica el idioma en el que se visualizará el mapa.

§Tamaño: define el tamaño que debe tener el mapa. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

Nota sobre la compatibilidad con las versiones precedentes:

En la versión anterior, la v.9, este objeto estaba disponible como widget delObjeto HTML y Widgets.


Objeto de Animación Flash

Paso 3 - Creación de la página >

Objeto de Animación Flash

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 permite introducir en las páginas varios tipos de animaciones y efectos para hacerlas más atrayentes y espectaculares.

Se puede importar cualquier animación Flash (formato .SWF): desde el simple banner con texto e imágenes, hasta animaciones más complejas e interactivas, ya sea guardadas en el equipo o publicadas en internet. En efecto, gracias a las funciones avanzadas disponibles, es posible también adjuntar archivos que fueran necesarios para la correcta reproducción de la animación.

Los comandos necesarios para proceder a la creación de un Objeto de Animación Flash están divididos en las siguientes secciones: General y Avanzado.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se puede importar el archivo que se desea utilizar para la creación del Objeto de Animación Flash.

La animación Flash puede ser introducida importando un archivo presente en el equipo (local) o un archivo publicado en Internet. En el primer caso es preciso activar la opción Archivo local en PC, pulsar sobre el botón [image] para explorar los recursos disponibles y señalar un archivo en formato .SWF. En el segundo caso, en cambio, es preciso activar la opción Archivo de Internet e introducir en el campo al efecto la dirección en la cual está disponible en línea el archivo.

La vista previa de la animación importada se puede ver dentro de la ventana incluida, activando la opción Vista previa.

Para poder visualizar la vista previa de la animación es necesario instalar el Player de Adobe® Flash®, disponible en la página http://get.adobe.com/es/flashplayer/otherversions/ (escoger la opción "Otros exploradores").

Para la animación insertada están disponibles las siguientes Propiedades:

§Texto alternativo: es el texto que se muestra como alternativa a la imagen cuando esta no puede ser visualizada.

§Tamaño: especifica el tamaño en píxeles del ancho y el alto de la animación Flash. Para el ancho, entre paréntesis está indicado el valor máximo que el Objeto puede asumir, en función de cómo haya sido configurada la Rejilla de maquetación. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

§Versión Flash: especifica qué versión del Flash Player es requerida para la visualización de la animación insertada. Si el visitante no dispone de la versión del Flash Player especificada, se muestra automáticamente una ventana con la solicitud para actualizarla.

§Fondo transparente: cuando está activada hace transparente el fondo de la animación añadida.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Avanzado

Por medio de los comandos de esta sección se procede en caso de que fuese necesario a la importación de los archivos asociados a la animación Flash indispensables para que esta funcione correctamente.

Todos los archivos vinculados a la animación Flash importados se muestran en una tabla-resumen en la que, además del nombre de los archivos, se indica también la Ruta del servidor.

Para elaborar la lista de los archivos vinculados a la animación Flash es necesario utilizar los siguientes comandos:

§Agregar...: abre la ventana Cargar archivo vinculado para añadir un nuevo archivo vinculado a la animación Flash.

§Editar...: abre la ventana Cargar archivo vinculado para modificar los ajustes definidos para el archivo seleccionado en la tabla-resumen de los archivos vinculados.

§Eliminar: elimina el archivo seleccionado de los presentes en la tabla-resumen de los archivos vinculados.

Por último, está disponible la opción:

§Nombre de ruta para cargar el archivo Flash: permite especificar la ruta de acceso de la carpeta en la que se debe publicar el archivo .SWF de la animación Flash.


Objeto de Lista de Productos

Paso 3 - Creación de la página >

Objeto de Lista de Productos

 Return to chapter overview
Mostrar/ocultar el texto oculto

Una de las funciones más interesantes de WebSite X5 es la de dar la posibilidad de crear y gestionar sitios web de comercio electrónico, mediante los que es posible no solo presentar los propios productos en un escaparate potencialmente visible para el mundo entero, sino también venderlos directamente en línea.

Además de permitir la inserción de los productos y la gestión del carrito de la compra, WebSite X5 permite preparar un auténtico catálogo en línea mediante un objeto especial llamado Lista de Productos. Este Objeto permite presentar un grupo de productos, seleccionados entre los ya introducidos en el Carrito de la compra, a través de las Fichas de Producto que resumen sus características principales y permiten comprarlos.

Los comandos disponibles para crear un Objeto Lista de Productos están organizados en las siguientes secciones: Lista y Ajustes.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Lista

Mediante esta sección es posible especificar qué productos deben ser visualizados en la Lista Productos.

La columna a la izquierda de la ventana presenta la Lista de categorías y productos introducidos durante la creación del Carrito de la compra disponible en el Paso 4 - Ajustes avanzados.

Al lado de cada categoría y de cada producto hay una casilla de verificación: basta pulsar las casillas correspondientes a las categorías y/o productos que se desea activar para hacer que queden añadidos dentro del Objeto Lista de Productos que se está elaborando. Todos los productos seleccionados se muestran automáticamente dentro de la columna al lado derecho de la ventana.

Activar una categoría o activar todos los productos pertenecientes a una categoría no es lo mismo: de hecho, solo en el primer caso, si más tarde se añadiesen nuevos productos a una categoría, estos se añadirían automáticamente a los Objetos Lista de Productos a los que estuviesen vinculados.

Los productos añadidos a la columna de la derecha de la ventana pueden ordenarse pulsando el botón Ordenación y seleccionando el tipo de orden que se desea aplicar: Personalizado, Nombre, Categoría, Precio, Ascendente o Descendente.

Seleccionando el orden Personalizado es posible usar los botones Mover arriba / Mover abajo para definir manualmente el orden de los productos.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Ajustes

Por medio de las opciones disponibles en esta sección es posible definir algunos ajustes gráficos relativos a las fichas a través de las cuales se presentan los productos añadidos a la lista.

Ante todo es preciso especificar el Modo de visualización eligiendo entre los siguientes tipos de fichas de producto:

Sólo texto

En la ficha de producto se indican, uno tras otro, los siguientes datos: Nombre del producto, descripción, lista desplegable con las variantes (si están disponibles), coste y, al lado, un campo para la cantidad con el botón "Comprar"

Imagen y texto

En la ficha de producto aparece a la izquierda la imagen del producto y a la derecha toda la información relativa al mismo.

Texto y imagen

Análogo al anterior tipo de presentación, coloca el texto a la izquierda y la imagen a la derecha.

Sólo imagen

En este caso, debajo de la imagen se indica toda la información asociada excepto la descripción completa.

Alternar imagen y texto

En este caso se alternan Fichas de Producto con imagen y texto a la derecha y Fichas de Producto con imagen y texto a la izquierda.

Mediante las funciones del recuadro Configuración de marcos es posible definir:

§Fichas por fila: permite especificar cuántas Fichas de Producto deben estar una junto a otra en una única fila.

§Altura fichas: permite especificar el valor en píxeles que debe asumir en altura cada Ficha de Producto. En función de este parámetro, el tamaño de las imágenes asociadas a los productos es modificado automáticamente. Si los textos de descripción de los productos son demasiado largos para poder ser visualizados completamente, se muestra la barra de desplazamiento.

§Ancho imagen (%): permite especificar, si se ha elegido un tipo de presentación en el que texto e imagen estén uno al lado del otro, cuánto espacio de la Ficha de Producto debe ser ocupado por la imagen y cuánto por el texto. En la práctica, si la imagen ocupa el 30% del ancho de la Ficha de Producto, el restante 70% será ocupado por el texto.

§Margen interior: el margen es el espacio vacío existente entre el borde de la Ficha de Producto y su contenido. Así pues, mediante esta opción es posible definir cuánto espacio debe haber alrededor del contenido dentro de la Ficha de Producto.

Mediante las funciones del recuadro Gráfica es posible definir:

§Color Texto/Color Fondo: definen el color del texto y del fondo de la Ficha de Producto.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

Mediante las funciones del recuadro Opciones es posible definir:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.

Mediante las funciones del recuadro Opciones es posible definir:

§Mostrar precio: muestra el precio asociado al producto, con o sin IVA, en la Ficha de Producto.

§Mostrar campo cantidad: muestra en la Ficha de Producto un Campo Cantidad para dar al cliente la posibilidad de especificar la cantidad de unidades del producto que quiere añadir al carrito de la compra.

§Activar vínculo sobre la imagen: activa en las diferentes imágenes de la Ficha de Producto el enlace a las imágenes ampliadas correspondientes. Dichas imágenes ampliadas son visualizadas mediante la ventana ShowBox.

La apariencia de la ventana de ShowBox se puede personalizar completamente: a través de las opciones que hay en la sección Estilos y Modelos | E-mail del Paso 4 - Ajustes avanzados se pueden ajustar, por ejemplo, los colores, la sombra, la opacidad y efectos de apertura.

Para que el Objeto Lista de Productos funcione correctamente, es necesario haber añadido primero productos al carrito de la compra con los comandos de la sección Carrito de la compra del Paso 4 - Ajustes avanzados.


Objeto HTML y Widgets

Paso 3 - Creación de la página >

Objeto HTML y Widgets

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 propone un Objeto específico para cada tipo de contenido que se desee añadir a una página: texto, imagen, animación, formulario de email, etc. Gracias a la posibilidad de además gestionar también el Objeto HTML y Widgets, las posibilidades se hacen prácticamente ilimitadas. En efecto, gracias al Objeto HTML y Widgets es posible insertar directamente porciones de código y resolver así funciones particulares, incluso no contempladas inicialmente.

Especialmente útiles son los widgets disponibles: pequeñas aplicaciones ya listas y en funcionamiento, creadas para resolver una tarea determinada. Un ejemplo sería el widget de Google News™: con la definición de unos pocos parámetros permite crear e insertar un recuadro con noticias de actualidad actualizadas en tiempo real.

Los comandos disponibles para crear un Objeto HTML y Widgets están divididos en las siguientes secciones: Código HTML y Avanzado.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Código HTML

En esta sección está disponible un editor mediante el cual elaborar el código HTML que se desea introducir en la página, escribiéndolo manualmente o haciendo doble clic en uno de los Widgets disponibles.

El editor disponible en el recuadro Código HTML ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el segmento de código seleccionado.

Deshacer [CTRL+Z] - Restablecer [ALT+MAYUSC+RETROCESO]

Anulan y rehacen la última operación realizada/anulada.

Para facilitar la escritura/lectura del código, en el editor HTML ha sido introducido el resaltado de la sintaxis (Syntax highlighting). Esta función hace que determinados elementos del código sean distinguidos mediante el uso de colores, sin que por ello se modifique en modo alguno el significado del texto. Gracias al resaltado, la estructura del código se hace clara y, de consecuencia, es mas simple localizar posibles errores.

En el recuadro Lista de widgets se ofrece la lista de todos los widgets disponibles. Haciendo doble clic en el Widget deseado, se abre la ventana Widget mediante la cual es posible definir los parámetros previstos. Confirmando, el código HTML del Widget es creado e insertado automáticamente en el editor.

Nota sobre la compatibilidad con las versiones precedentes:

Objetos disponibles - Mientras que en la versión anterior el Libro de Visitas, los botones de redes sociales y el Mapa estaban disponibles como widgets, en esta versión 10 son auténticos Objetos (ver Paso 3 - Creación de la página).

Por último, en el recuadro Propiedades están disponibles las siguientes opciones:

§Ancho: muestra el valor del ancho del Objeto HTML y Widgets, este valor es definido automáticamente en función del espacio disponible en la rejilla de maquetación.

§Altura: define el valor de la altura del Objeto HTML y Widgets.

§Visualizar barras de desplazamiento: activa por defecto, hace que se añada automáticamente la barra de desplazamiento si el Objeto HTML y Widgets tiene una altura superior a la definida mediante la opción Altura.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Avanzado

Por medio de los comandos de esta sección se puede crear una hoja de estilo en cascada (.CSS) y/o definir la lista de archivos para adjuntar al Objeto HTML y Widgets en el que se está trabajando.

En el recuadro Código CSS está disponible un editor (análogo al que hay en la sección Código HTML) por medio del que es posible introducir las instrucciones para conformar la hoja de estilo en cascada. No olvidemos que la finalidad de las CSS es definir el aspecto gráfico de las páginas HTML a las que están vinculadas.

En el recuadro Archivos conectados al código HTML, en cambio, todos los archivos vinculados se muestran a través de una tabla-resumen en la que, además del nombre de los archivos, se indica también la Ruta del servidor.

Para elaborar la lista de los archivos vinculados al código HTML es posible utilizar los siguientes comandos:

§Agregar...: añade, mediante la ventana Cargar archivo vinculado que se abre, un nuevo archivo vinculado.

§Editar...: abre la ventana Cargar archivo vinculado para modificar los ajustes definidos para el archivo seleccionado en la tabla-resumen de los archivos vinculados.

§Eliminar: elimina el archivo seleccionado de los presentes en la tabla-resumen de los archivos vinculados.


Editor de imágenes

Paso 3 - Creación de la página > Funciones comunes >

Editor de imágenes

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5, además de optimizar automáticamente las imágenes importadas, también ofrece un editor gráfico interno muy versátil para darle el toque final a sus fotografías e imágenes.

El Editor de imágenes se puede iniciar con el botón Editar... disponible normalmente en las ventanas en las que es posible añadir un archivo gráfico, como por ejemplo las relacionadas con el Objeto Imagen, con e lObjeto de Galeríay con la creación de un nuevo producto en el Carrito de la compra.

El Editor de imágenes está dividido en las siguientes secciones: Recorte y rotación, Filtros, Marca de agua, Máscara, Marco, Efectos y Biblioteca.

El Editor de imágenes se compone de los siguientes botones:

§&Aceptar: cierra el Editor de imágenes y vuelve a la ventana principal guardando y aplicando todos los cambios aportados a la imagen.

§&Cancelar: cierra el Editor de imágenes y vuelve a la ventana principal anulando los cambios aportados a la imagen.

§Guardar como...: guarda una copia de la imagen original en formato .PNG.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Recorte y rotación

Por medio de los comandos de esta sección se puede recortar el área de la imagen que se desea mostrar, eliminando el resto.

Es posible ajustar el área de corte directamente en la vista previa de la imagen utilizando los puntos de anclaje para modificarla. El área seleccionada para el corte puede ser desplazada para fijar el área deseada: para ello basta pulsar sobre ella y, manteniendo pulsado el botón izquierdo del ratón, posicionarla adecuadamente.

No es necesario confirmar el corte: la parte externa del área de corte (más oscura que el original) no se considerará. Por contra, para anular el corte, basta hacer clic en la imagen, fuera el área seleccionada.

A un lado de la imagen se muestran los siguientes recuadros:

§Cortar: indica el valor en píxeles de la Coordenada X y de la Coordenada Y que definen la posición del ángulo superior izquierdo del área seleccionada con el corte, además de los valores del Ancho y de la Altura que toma el área seleccionada. Además de ser tomados directamente en función del área de corte definida, los valores de los parámetros citados también pueden ser introducidos en las campos correspondientes o ajustados mediante los cursores.

§Espejo: permite invertir la imagen en sentido horizontal (según el eje vertical) y/o vertical (según el eje horizontal).

§Rotación: rota la imagen en el sentido de las agujas del reloj un 0°, un 90°, un 180° o un 270°.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Filtros

Por medio de los comandos de esta sección se pueden cambiar los principales ajustes del color y establecer algunos filtros gráficos para la imagen importada.

Para configurar un filtro basta seleccionarlo en la lista, activarlo y definir sus ajustes. Los cambios derivados de la aplicación de filtros tienen efecto inmediatamente y aparecen enseguida en la vista previa.

§Filtros: presenta la lista de los filtros que es posible aplicar a la imagen. La lista incluye: Luminosidad/Contraste, Color RGB, Intensidad (HSL), Claro, Difuminado, Blanco y negro, Sepia, Mosaico, Punteado, Difusión, Pintura al óleo, Lienzo, Ruido, Mármol. Para aplicar un filtro basta hacer clic en él de modo que aparezca la marca de verificación en la casilla correspondiente.

§Ajustes: presenta los ajustes que se pueden utilizar para definir el filtro seleccionado.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Marca de agua

Por medio de los comandos de esta sección se puede aplicar una marca de agua a la imagen importada para evitar que se hagan copias no autorizadas. En efecto, la finalidad de la marca de agua es alterar la imagen, por ejemplo indicando explícitamente el propietario de los derechos de copyright, para desanimar a quienes quisieran copiarla indebidamente.

§Marca de agua: muestra la lista de marcas de agua donde elegir la que se quiere aplicar a la imagen. Además de las imágenes de marca de agua que se ofrecen, es posible aplicar una marca de agua personal: basta seleccionar la segunda vista previa de la lista (Personalizada...) e importar el archivo gráfico preparado al efecto.

§Ajustes: rota un 90°, un 180° o un 270° o invierte horizontalmente/verticalmente la marca de agua aplicada a la imagen.

Una marca de agua debe ser predispuesta como archivo gráfico en formato .GIF, .PNG, .PSD o .WMF para el que se configura la transparencia: la marca de agua se sobreimpresiona sobre la imagen original de manera que permite que se vean solo las partes correspondientes a las áreas transparentes.

Puesto que el formato .GIF maneja un único nivel de transparencia, mientras que los formatos .PNG y .PSD manejan hasta 256, se recomienda guardar las marcas de agua en uno de estos últimos formatos.

+

=

Pulsar para expandir/reducir Referencia: Los comandos de la sección Máscara

Por medio de los comandos de esta sección se puede aplicar una máscara a la imagen importada para modificar su forma.

§Máscara: muestra la lista de máscaras donde elegir la que se quiere aplicar a la imagen. Además de las máscaras que se ofrecen, es posible aplicar una máscara personal: basta seleccionar la segunda vista previa de la lista (Personalizada...) e importar el archivo gráfico preparado al efecto.

§Ajustes: rota un 90°, un 180° o un 270° o invierte horizontalmente/verticalmente la máscara aplicada a la imagen.

Una máscara no es otra cosa que una imagen de 256 colores en escala de grises: la máscara se aplica sobre la imagen original de modo que las partes cubiertas por el negro se vuelven invisibles y las cubiertas por el blanco se mantienen visibles.

+

=

Pulsar para expandir/reducir Referencia: Los comandos de la sección Marco

Utilice los comandos de esta sección para aplicar un marco para la imagen importada.

§Marco: muestra la lista de marcos donde elegir el que se quiere aplicar a la imagen. Además de los marcos que se ofrecen, es posible aplicar un marco personal: basta seleccionar la segunda vista previa de la lista (Personalizada...) e importar el archivo gráfico preparado al efecto.

§Ajustes: rota un 90°, un 180° o un 270° o invierte horizontalmente/verticalmente el marco aplicado a la imagen.

Un marco debe ser predispuesto como archivo gráfico en formato .GIF, .PNG, .PSD o .WMF para el que se configura la transparencia: el marco se superpone sobre la imagen original de manera que permite que se vean solo las partes correspondientes a las áreas transparentes.

Puesto que el formato .GIF maneja solamente un nivel de transparencia, mientras que los formatos .PNG y .PSD manejan hasta 256, sugerimos guardar los marcos en uno de estos últimos formatos.

+

=

Pulsar para expandir/reducir Referencia: Los comandos de la sección Efectos

Por medio de los comandos de esta sección se pueden configurar algunos efectos gráficos para la imagen importada.

§Efectos: presenta la lista de los efectos que es posible aplicar a la imagen. La lista incluye: Sombra, Espejo, Brillo exterior, Borde a color, Degradado, Convexo, Rugoso, Marco, Rotación, Perspectiva, Distorsión y Opacidad. Para aplicar un efecto basta hacer clic en él de modo que aparezca la marca de verificación en la casilla correspondiente.

§Ajustes: presenta los ajustes que se pueden utilizar para definir el efecto seleccionado.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Biblioteca

En esta sección es posible elegir un set de ajustes, guardados como Estilo, y aplicarlos a la imagen actual; o viceversa, se guardan los ajustes definidos para la imagen activa en un nuevo Estilo que se podrá retomar más tarde para aplicarlo a otras imágenes.

§Aplicar: permite aplicar a la imagen activa todos los ajustes configurados para el estilo seleccionado.

§Agregar: guarda todos los ajustes definidos en las secciones anteriores del Editor de imágenes para la imagen actual en un Estilo y lo añade a la lista de estilos Personalizada.

§Eliminar: borra el estilo seleccionado de los existentes en la lista de estilos Personalizada. No es posible quitar los estilos Valores preestablecidos.


Estilo de celdas

Paso 3 - Creación de la página > Funciones comunes >

Estilo de celdas

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 permite proceder a la creación de cada página de un sitio web mediante una Rejilla de paginación que subdivide el espacio disponible en celdas. El número de celdas disponibles depende del número de filas y columnas insertadas y, para cada celda, es posible insertar un contenido distinto (mediante el simple Drag & Drop de los objetos disponibles).

La celda equivale por tanto a un espacio determinado de la página: tiene un contenido propio y puede tener un aspecto gráfico totalmente particular. Así pues, modificando los márgenes, bordes y fondo de la celda es posible crear recuadros dentro de la Página mediante los cuales organizar los contenidos y resaltar adecuadamente aquellos que se desea poner en primer plano.

Para definir el aspecto gráfico de una celda basta seleccionarla y pulsar sobre el botón [image] para abrir la ventana Estilo de celdas, cuyas opciones están organizadas en las siguientes secciones: Estilo, Textos y Biblioteca.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo

Mediante los comandos de esta sección se definen los ajustes gráficos de la celda activa de la Rejilla de paginación.

Primeramente es necesario definir el tipo de Fondo del sitio que se quiere que tenga la celda, eligendo entre:

Fondo coloreado: el fondo de la celda es coloreado con un único color.

Fondo degradado: el fondo de la celda es llenado con una gradación de la que se pueden definir los colores inicial y final y la dirección del difuminado.

Fondo con imagen: el fondo de la celda es creado mediante la importación de una imagen.

Ajustar imagen a la Celda: el fondo de la Celda es creado mediante la importación de una imagen que es cortada en bloques y recompuesta para que se pueda adaptar perfectamente al tamaño de la celda misma. (ver "Cómo trabajar el aspecto de la celda")

Dependiendo del tipo de fondo, es posible modificar diferentes opciones del recuadro Ajustes.

 | Fondo coloreado | Fondo degradado | Fondo con imagen | Ajustar imagen a la Celda
§Color Fondo: especifica el color para usar como relleno del fondo. | P | - | P | P
§Color inicial / Color final: definen los colores inicial y final que se utilizarán para hacer un degradado. | - | P | - | -
§Difusión: permite establecer si en el degradado debe predominar el color inicial o el color final , definiendo el espacio (en píxeles) en el que se debe producir la transición del primero al segundo. Por ejemplo, en un degradado vertical en que se pasa del gris al blanco con una difusión de 250, la gradación es efectuada en los primeros 250 px y después el fondo quedará uniformemente blanco. | - | P | - | -
§Dirección: establece el tipo de difuminado que se aplicará, eligiendo entre desde arriba, desde abajo, desde la izquierda y desde la derecha.. | - | P | - | -
§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo. | - | - | P | P
§Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen se puede repetir solo en sentido horizontal, solo en sentido vertical o en ambos sentidos, de modo que ocupe todo el espacio disponible. Además es posible hacer que la imagen se adapte, es decir, que se redimensione de modo que cubra todo el fondo. | - | - | P | -
§Alineación: permite especificar la alineación de la imagen utilizada como fondo en relación al área ocupada por la celda. | - | - | P | -
§Saturación del color: especifica el color hacia el que debe tender la imagen introducida como fondo de la celda. Básicamente se aplica un efecto "coloreado" a la imagen para cambiarlo por el color deseado. | - | - | P | -
§Bloquear ancho / Bloquear altura: permiten configurar el tamaño de los bloques en los que se corta la imagen de fondo para determinar qué partes de la imagen se deben mantener inalteradas y cuáles deben ser repetidas. (ver "Cómo trabajar el aspecto de la celda") | - | - | - | P
§Opacidad: configura el grado de opacidad del color/del difuminado/de la imagen de fondo aplicado. Para valores que tienden a 0, disminuye la opacidad y el fondo de la Celda se vuelve más transparente, dejando ver el fondo de la Página. | P | P | P | P

Mediante las opciones del recuadro Borde es posible definir:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.

Por último, mediante las opciones del recuadro Alineación y márgenes es posible definir:

§Alineación: alinea arriba/al centro/abajo y a la izquierda/al centro/a la derecha el objeto contenido respecto a la celda activa.

§Margen exterior / Margen interior: definen el valor en píxeles para los márgenes externos e internos de la celda activa (ver "El Box Model en WebSite X5").

Nota sobre la compatibilidad con las versiones precedentes:

En las versiones anteriores, las opciones relacionadas con los márgenes de la celda y con el alineamiento del contenido de la celda estaban disponibles a través de menús que se abrían con los botones [image] y [image] existentes en la barra de herramientas que hay sobre la rejilla de paginación. En esta versión 10, estos botones han sido retirados y las opciones están ahora incluidas en la ventana Estilo de celdas| Estilo.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Textos

Mediante los comandos de esta sección se introducen y se define el aspecto gráfico de los elementos de texto que completan el estilo de la celda activa de la Rejilla de paginación.

En primer lugar hay que definir el elemento, texto o imagen, que se desea insertar y sobre el que se desea trabajar. Es posible elegir entre los siguientes elementos:

Título: es el texto que se muestra como título de la celda activa.

Imagen del encabezado: es una imagen que puede ser insertada en la cabecera de la celda activa, eventualmente junto al Título.

Texto descriptivo: es el texto que se muestra como pie de la celda activa.

Una vez insertados, los distintos elementos pueden ser seleccionados mediante el menú desplegable al efecto o haciendo clic directamente en la imagen de vista previa.

Dependiendo del tipo de elemento seleccionado, es posible modificar diferentes opciones del recuadro Ajustes.

Para los elementos Título y para el Texto descriptivo, las opciones disponibles son:

§Contenido: campo para escribir el título o el texto descriptivo de la celda.

§Color Fondo / Color Texto: definen el color del fondo del texto y del texto con el que se está trabajando.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: alinea el texto a la izquierda, al centro o a la derecha respecto de la celda.

§Margen exterior / Margen interior: permiten ajustar el valor en píxeles de los márgenes del texto, para poderlo situar con precisión decidiendo a qué distancia colocarlo de los bordes de la celda.

Para el elemento Imagen del encabezado, en cambio, las opciones disponibles son:

§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo.

§Alineación: alinea la imagen insertada a la izquierda, al centro o a la derecha respecto de la celda.

§Margen: permiten definir el valor en píxeles para los márgenes de la imagen insertada, para poderla colocar con precisión respecto a los bordes de la celda y, del mismo modo, respecto al Título que se muestre.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Biblioteca

En esta sección es posible elegir un set de ajustes, guardados como Estilo, y aplicarlos a la celda activa; o viceversa, se guardan los ajustes definidos para la Celda activa en un nuevo Estilo que se podrá retomar más tarde para aplicarlo a otras celdas.

La Librería presenta una lista de todos los estilos Valores preestablecidos y Personalizada ya creados. Además, están disponibles los siguientes comandos:

§Aplicar: permite aplicar a la celda activa todos los ajustes configurados para el estilo seleccionado.

§Agregar: guarda todos los ajustes gráficos definidos en las secciones Estilo y Textos para la celda activa en un Estilo y lo añade a la lista de estilos Personalizada.

§Eliminar: borra el estilo seleccionado de los existentes en la lista de estilos Personalizada. No es posible quitar los estilos Valores preestablecidos.

En la composición de un Estilo se mantienen todos los ajustes gráficos definidos para la celda, pero no los contenidos, que podrían tener que ser cambiados de una celda a otra. De esta manera, por ejemplo en el estilo se guarda el Color Texto o la Fuente pero no el Contenido especificado para elementos como el Título y el Texto descriptivo asociado a una celda.

Best practice:

-

Cómo trabajar en el Estilo de celdas

Profundización:

-

"El Box Model en WebSite X5"


Ventana Enlace

La ventana Enlace

Paso 3 - Creación de la página > Funciones comunes >

La ventana Enlace

 Return to chapter overview
Mostrar/ocultar el texto oculto

Además de los menús de navegación fija, creados automáticamente en función del Mapa, WebSite X5 permite añadir a textos, imágenes y a otros elementos los enlaces necesarios para resolver una serie de operaciones diversas: abrir páginas internas o externas, abrir archivos, mostrar imágenes, añadir un producto al carrito de la compra, etc.

Al predisponer un enlace es posible, no sólo elegir el tipo de acción, sino también definir y personalizar el tooltip asociado para proporcionar una explicación de lo que ocurrirá tras el clic.

Las opciones disponibles para predisponer un enlace se presentan en las siguientes secciones: Acción y Descripción.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Acción

Por medio de los comandos de esta sección se especifica el tipo de acción que se quiere asociar al enlace:

Página del sitio

define un enlace a otra página del sitio web. Pulsando el botón [image] se puede explorar el Mapa del Sitio para seleccionar la Página del sitio que se quiere enlazar. Si es necesario, es posible especificar también el Delimitador interno de la página al que dirigirse, seleccionándolo de la lista de delimitadores que hay en la página. Por último, es posible especificar si la página enlazada debe ser visualizada en la misma ventana, en una nueva ventana del explorador o en una ventana emergente. En este último caso, se abre una nueva ventana del explorador de la que se puede configurar el tamaño (Ancho del Tooltip y Altura).

Los delimitadores deben haber sido asociados a los objetos con anterioridad para que aparezcan en la lista que propone la opción Delimitador interno de la página.

Para asociar un delimitador a un objeto, se debe emplear el botón [image] disponible en el Paso 3 - Creación de la página.

Archivo o URL

permite predisponer un enlace a cualquier recurso, un archivo o una página HTML, que esté almacenado en el equipo en el que se está trabajando o ya publicado en internet. Para especificar qué archivo se quiere enlazar, basta activar la opción Archivo local en PC y pulsar sobre el botón [image] para explorar los recursos almacenados en el sistema, o bien activar la opción Archivo de Internet e introducir la dirección (URL) que identifica su situación en internet.

También en este caso, es posible especificar si el recurso enlazado debe ser visualizado en la misma ventana, en una nueva ventana del explorador o en una ventana emergente cuyo tamaño se puede configurar (Ancho del Tooltip y Altura).

Archivo o URL con ShowBox

Define un enlace para visualizar un archivo cualquiera, almacenado en el equipo o publicado en la red, en una ventana ShowBox. A diferencia de lo que sucede con la ventana emergente, en la ventana ShowBox el archivo abierto se muestra en primer plano sobre el fondo de la página original, vuelta automáticamente más opaca y clara/oscura.

Para especificar qué archivo se quiere enlazar, basta activar la opción Archivo local en PC y pulsar sobre el botón [image] para explorar los recursos almacenados en el sistema, o bien activar la opción Archivo de Internet e introducir la dirección (URL) que identifica su situación en internet. Por medio de las opciones disponibles, es posible definir el tamaño (Ancho del Tooltip y Altura) de la ventana ShowBox además de una Descripción breve que será visualizada a pie de página.

El enlace con a una ventana ShowBox es especialmente adecuado para la visualización de imágenes, pero puede ser utilizado también para la visualización de distintos recursos como, por ejemplo, documentos .PDF.

Galería con ShowBox

Establece un enlace para iniciar la visualización de una galería de imágenes en una ventana ShowBox. Para crear la lista de las imágenes basta utilizar los comandos disponibles: Agregar..., Eliminar, Subir y Bajar. Además, es posible predisponer el tamaño (Ancho y Altezza massima) de la ventana ShowBox.

La apariencia de la ventana de ShowBox se puede personalizar completamente: a través de las opciones que hay en la sección Estilos y Modelos | E-mail del Paso 4 - Ajustes avanzados se pueden ajustar, por ejemplo, los colores, la sombra, la opacidad y efectos de apertura.

E-mail

Establece un enlace para abrir el programa de correo electrónico predefinido y enviar un email. Para definir este tipo de enlace basta introducir la dirección de email y, opcionalmente, el asunto y el contenido del mensaje.

Activando la opción Activar protección de dirección de e-mail, la dirección de email especificada se escribe en forma encriptada dentro del código HTML de la página: de esta manera no será reconocido por los robots que escanean la red en búsqueda de direcciones para el envío de spam.

Llamada vía Internet

establece un enlace para abrir el programa asociado a las llamadas por internet (por ejemplo, Skype) y dialogar con el usuario especificado a través del campo incluido. Además, es posible definir el Tipo de acción eligiendo entre: Llamar, Agregar contacto, Chat, Mostrar perfil, Skype VoiceMail y Enviar archivo.

Sonido

Establece un enlace para iniciar la reproducción de un sonido. Para especificar qué archivo se quiere enlazar, basta activar la opción Archivo local en PC y pulsar sobre el botón [image] para explorar los recursos almacenados en el sistema, o bien activar la opción Archivo de Internet e introducir la dirección (URL) que identifica su situación en internet. Es posible enlazar archivos en formato .MP3.

Pulsando sobre el enlace aparece un ToolTip que contiene el botón Play/Pause para activar/interrumpir la reproducción del sonido. Haciendo salir el ratón del Tooltip, este se cierra y la reproducción del sonido se interrumpe.

El Tooltip del enlace con el sonido lo crea automáticamente el programa, y su aspecto se define en función de los ajustes configurados en la ventana Estilos y Modelos | Textos del Paso 4 - Ajustes avanzados.

Imprimir página

Establece un enlace para iniciar la impresión de la página mostrada.

Mensaje de aviso

Establece un enlace para mostrar un mensaje de aviso. Para definir este tipo de enlace basta escribir el Texto del mensaje en el campo al efecto. Activando la opción Mostrar como ventana de popup, el mensaje de aviso se mostará en una ventana de diálogo del estilo de Windows.

Sindicación web (Feed RSS)

Muestra la fuente RSS del sitio web: el enlace está activo solo si se ha creado una fuente RSS mediante la ventana correspondiente del Paso 4 - Ajustes avanzados.

Cuando se prueba localmente el funcionamiento de la página web creada, una ventana de aviso advierte que los Feed RSS se mostrarán solamente una vez que la página web sea publicada online.

Blog

Establecer un enlace para abrir el blog enlazado al sitio con el que se trabaja. Para que este enlace funcione correctamente, es necesario haber creado con anterioridad un blog mediante la sección correspondiente del Paso 4 - Ajustes avanzados.

Mediante las opciones disponibles es posible especificar si el blog enlazado debe ser mostrado en la misma ventana o en una nueva ventana del explorador de internet.

Mapa del sitio

Establece un enlace para mostrar el Mapa del Sitio completo en una página al efecto. Los elementos del Mapa del Sitio, creado automáticamente, son enlaces activos a cada una de las páginas: el Mapa representa, por tanto, una útil herramienta de navegación a disposición del visitante. La visualización de los elementos del Mapa se puede gestionar usando los comandos Expandir completamente y Compactar completamente.

Mostrar el Carrito

Permite predisponer un enlace mediante el cual visualizar la página del carrito de la compra con la lista de todos los productos ya pedidos.

Agregar al carrito

Permite predisponer un enlace mediante el cual permitir al visitante acceder al carrito de la compra de comercio electrónico para efectuar un pedido o añadir directamente un producto especificado de los que desea comprar.

En el primer caso es preciso activar la opción Mostrar la lista de productos de la categoría seleccionada y seleccionar la categoría deseada a través del esquema que ofrece todo el catálogo de productos.

En el segundo caso, en cambio, es preciso activar la opción Agregar el producto seleccionado directamente al carrito y seleccionar el producto también por medio de la lista correspondiente. Además, también es posible especificar la Opción y la Cantidad de unidades del producto que se añadirá al carrito de la compra.

Para que los enlaces Mostrar el Carrito y Agregar al carrito funcionen correctamente, es necesario haber creado antes el carrito de la compra de comercio electrónico por medio de los comandos de la sección Carrito de la compra del Paso 4 - Ajustes avanzados.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Descripción

Por medio de los comandos de esta sección se puede asociar una descripción al enlace. Esta descripción se utilizará para conformar una nota explicativa, llamada "Tooltip" o "Tip". El Tooltip se muestra al lado del puntero del ratón cuando este se sitúa sobre el enlace y debería servir para explicar qué sucederá si se pulsa el enlace: si se pasará a otra página o sitio web, si se mostrará una imagen, si se iniciará la descarga de un archivo etc.

Los comandos disponibles para la elaboración de un Tooltip son:

§Texto: especifica la descripción del enlace.

§Archivo imagen: especifica la imagen que se mostrará en el Tooltip junto a o en lugar de la descripción del enlace.

§Ancho del Tooltip: Establece el ancho en píxeles del Tooltip.

§Ancho imagen (%): establece el ancho de la imagen en porcentaje respecto a la anchura del Tooltip.

§Posición de la imagen: define la posición de la imagen insertada en el Tooltip respecto al texto.

Texto, Archivo imagen y Ancho del Tooltip son parámetros que varían para cada enlace y, por tanto, deben ser configurados cada uno en su momento. Otros ajustes gráficos, referidos al aspecto del Tooltip y por tanto comunes para todo el proyecto, pueden definirse en la ventana Estilos y Modelos | Textos del Paso 4 - Ajustes avanzados.


Ventana Propiedades de los efectos

Paso 3 - Creación de la página > Funciones comunes >

Ventana Propiedades de los efectos

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana ofrece los comandos necesarios para añadir un efecto de entrada a las imágenes seleccionadas del Objeto Presentación, disponible en el editor para el Editor de plantilla, a las imágenes seleccionadas del Objeto de Galería y a las imágenes de la presentación creada para presentar un producto (ver Objeto de Lista de Productos).

Los comandos disponibles están distribuidos en las siguientes secciones: Tipo de efecto, Zoom y posición y Página.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Tipo de efecto

Por medio de los comandos de esta sección se puede elegir el tipo de efecto de entrada que se aplicará a las imágenes con las que se está trabajando:

§Lista de los efectos: presenta la lista de todos los efectos disponibles. Seleccionando la opción "1 - Aleatorio" el efecto que se aplica es elegido aleatoriamente de modo automático. Una vez seleccionado, para cada efecto se muestra la vista previa mediante una ventana al efecto.

§Tiempo de visualización: permite predisponer el tiempo (en segundos) para la visualización de la imagen.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Zoom y posición

Por medio de los comandos de esta sección se puede elegir el tipo de movimiento y de ampliación que se aplicará a las imágenes con las que se está trabajando.

§Posición inicial: permite definir el factor de ampliación y las coordenadas X e Y que definen la posición inicial desde la que comienza el movimiento de la imagen.

§Posición final: permite definir el factor de ampliación y las coordenadas X e Y que definen la posición final en la que termina el movimiento de la imagen.

En ambos casos es posible operar directamente sobre la vista previa para arrastrarla hasta la posición deseada y definir así las posiciones inicial y final del movimiento.

En una misma imagen es posible predisponer tanto un efecto en entrada como un efecto que prevé el movimiento y el zoom. En este caso, se aplica primero el efecto de entrada y la imagen se muestra según las coordenadas y el tamaño definidos para la posición inicial. A continuación, se reproduce el desplazamiento, y eventualmente el cambio de tamaño, que lleva a la imagen a alcanzar las coordenadas y el tamaño definidos para la posición final.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Página

Esta sección está activa solo en el caso de imágenes pertenecientes a un Objeto Presentación añadido en el encabezado o el pie de página de la plantilla gráfica (ver Editor de plantilla).

Presenta nuevamente el Mapa del Sitio: añadiendo la marca de verificación al lado de las páginas, se seleccionan aquellas en las que se mostrará la imagen de la presentación en la que se está trabajando. De este modo, partes del mismo Objeto Presentación existentes en el encabezado o pie de página de la plantilla pueden mostrarse en diferentes secciones del sitio web.

Especificar en qué páginas de un sitio web se deben ver determinadas imágenes de una presentación puede ser muy útil en el caso, por ejemplo, de mensajes publicitarios. Mediante la presentación se configuran todos los banners que se usarán en el sitio web y después se hace que para cada página o sección se muestren sólo los mensajes pertinentes.


Ventana Cargar archivo vinculado

Paso 3 - Creación de la página > Funciones comunes >

Ventana Cargar archivo vinculado

 Return to chapter overview

Esta ventana se abre con el botón Agregar... correspondiente a la creación de la lista de archivos vinculados o a una animación Flash (ver Objeto de Animación Flash | Avanzado) o a un código HTML (ver Objeto HTML y Widgets | Avanzado).

Los comandos disponibles son:

§Archivo adjunto para cargar en servidor: selecciona un archivo para su importación porque está vinculado al Objeto con el que se está trabajando.

§Ruta del servidor: permite especificar la ruta de acceso correspondiente a la carpeta en la que debe ser publicado el archivo importado, por estar vinculado al Objeto.

§Vincular archivo a Página (sólo archivos .js y .css): si el archivo importado es un archivo JavaScript (formato .JS) o una hoja de estilo (formato .css), para poder funcionar debe ser vinculado a la página de código. En estos casos, activando esta opción, el código necesario se añade automáticamente en la sección <HEAD> del código HTML de la página.


Ajustes avanzados

Paso 4 - Ajustes avanzados >

Ajustes avanzados

 Return to chapter overview

Después de haber diseñado el Mapa del Sitio en el Paso 2 y de haber creado cada una de las páginas añadiendo todos los contenidos necesarios en el Paso 3, es posible continuar con el paso 4, donde se proponen una serie de secciones que contienen numerosas funciones avanzadas. Es así posible proceder con la definición del Estilo de los distintos menús de navegación y de los textos, pero también con la creación de secciones importantes del sitio como el Carrito de la compra de comercio electrónico, el Blog o el Área reservada.

Concretamente, las funciones avanzadas disponibles son:

Menú Principal

Define el aspecto gráfico de los elementos del menú de primer nivel, o sea del menú que está siempre visible en la parte superior (estructura de menú horizontal) o lateral (estructura de menú vertical) del sitio web, que resuelve la navegación fija.

Menú desplegable

Define el aspecto gráfico de los elementos del menú desplegable, esto es, el menú que aparece pasando el ratón sobre un elemento del Menú principal.

Menú de Página

Define el aspecto gráfico del menú de página, es decir del menú que presenta la lista de páginas del nivel actual.

Estilos y Modelos

Definen los estilos que se quiere aplicar a los diferentes elementos de texto presentes en las páginas, a la ventana ShowBox vinculada al Objeto de Galería, a los tooltips que pueden estar asociados al Enlace y a los emails generados si se utiliza el Objeto Formulario de envío e-mail o si se crea un Carrito de la compra.

Página de bienvenida

Predispone una página de bienvenida que sirve de introducción al sitio web, con posibilidad de contar con una banda sonora y los enlaces necesarios para la elección del idioma de consulta.

Mensaje publicitario

Define y personaliza un mensaje publicitario que se mostrará solo en la página de inicio o en todas las páginas del sitio web, en la posición especificada.

Blog

Crea y gestiona un blog, una especie de diario web en el que publicar noticias que los usuarios podrán comentar.

Sindicación web (Feed RSS)

Crea y gestiona una fuente RSS, muy útil como canal de información constantemente actualizado.

Administración de datos

Configura los métodos de gestión de los datos recogidos a través de elementos del sitio web como los Formularios de envío de emails, el Blog, el Libro de Visitas o el Carrito de la compra.

Gestión de acceso

Crea los perfiles de usuario que podrán acceder a las páginas protegidas del sitio y los organiza en grupos. Las páginas protegidas, definidas en el paso 2 durante la Creación de mapa, conforman un área reservada a la que los usuarios podrán entrar solo mediante el acceso con nombre de usuario: las credenciales de acceso utilizadas determinarán qué páginas protegidas podrán ser vistas.

Carrito de la compra

Crea y gestiona un carrito de la compra de comercio electrónico, definiendo aspectos como la lista de productos, los métodos de envío y de pago, o los elementos del formulario que hay que rellenar para hacer el pedido.

Para mayor información acerca de la creación del Mapa del Sitio y la distinción entre elementos de primer y segundo nivel, menús desplegables y submenús, dirigirse a lo explicado en Creación de mapa.


Estilo del menú principal

Paso 4 - Ajustes avanzados >

Estilo del menú principal

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos para proceder a la definición de algunos ajustes avanzados sobre el estilo gráfico de los botones relativos a los elementos del primer nivel del Menú.

Los menús son creados y actualizados automáticamente por el programa de acuerdo al Mapa del Sitio diseñado en el Paso 2 - Creación de mapa. El Menú principal es el que presenta los elementos de primer nivel del Mapa que conformarán la navegación fija del Sitio. En los sitios web con estructura de menú horizontal, el Menú principal está siempre presente, situado inmediatamente por encima o por debajo del encabezamiento. En los sitios con estructura de menú vertical, el Menú principal está siempre visible, situado en una columna a la izquierda o a la derecha del contenido de la Página.

Los comandos necesarios para proceder a la personalización de los botones están organizados en las siguientes secciones: General, Elementos de menú y Estilo de 3D.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Mediante los comandos de esta sección se configuran algunos ajustes generales del Menú principal.

Las opciones disponibles en el recuadro Estilo son:

§Ancho: ajusta el valor en pixels de la anchura de los botones que contienen los elementos de Menú

§Margen: establece el valor en pixels del margen horizontal y del margen vertical, es decir del espacio existente entre el borde del botón y el texto contenido.

§Distancia entre botones: define el valor en pixels del margen exterior, es decir del espacio que hay entre un botón y el otro.

§Desplazamiento automático del menú: hace que el menú de navegación se desplace automáticamente junto al contenido de la página, de manera que permanezca siempre visible y disponible.

La anchura de los botones debe ser definida considerando también el espacio total disponible para el menú. Este parámetro se puede modificar libremente en el caso de que no se esté utilizando una plantilla gráfica predefinida (ver Plantilla personalizada).

Las opciones que están en el recuadro Texto son:

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: establece la alineación del texto a la izquierda, en el centro o a la derecha respecto al botón.

§Usar antialias para visualizar el texto: aplica un efecto de suavizado de contorno al texto para hacer los bordes de las letras menos irregulares.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Elementos de menú

Por medio de los comandos de esta sección se definen los colores, las imágenes de fondo y el estilo de los textos para los diferentes estados de los botones del menú principal.

En primer lugar es preciso seleccionar el Elemento de menú en el que se quiere trabajar: es posible definir el aspecto del [image] Elemento de menú y del [image] Artículo al pasar el ratón/Página actual. Para seleccionar el Elemento del Menú se puede utilizar el menú desplegable o actuar directamente sobre la imagen de Vista previa que se actualiza constantemente según los cambios introducidos.

Para todos los elementos del menú es posible modificar las siguientes opciones del recuadro Estilo:

§Color Fondo / Color Texto / Color Borde: definen el color para el fondo, para el texto y para el borde del botón.

§Imagen de fondo: permite definir la imagen que debe ser visualizada como fondo del botón. Para seleccionar la imagen que se quiere usar basta pulsar sobre el botón [image] para explorar los recursos disponibles: se pueden usar archivos en formato .JPG, .GIF y .PNG. Como alternativa, es posible pulsar en la flecha al lado del campo para abrir la librería de botones y seleccionar la imagen que se quiere usar.

§Estilo fuente: para el elemento Elemento de menú, define el estilo del texto del botón eligiendo entre Ninguno, Bajo relieve, Alto relieve y Sombra. El elemento Artículo al pasar el ratón/Página actual toma automáticamente la configuración definida para el elemento Elemento de menú: además, es posible añadir uno de los siguientes estilos: Normal, Negrita, Cursiva y Negrita cursiva.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo de 3D

Mediante los comandos de esta sección se definen la forma y el aspecto 3D de los botones.

Mediante las opciones disponibles en el recuadro Forma es posible definir:

§Forma: define la forma del botón, eligiéndola entre las que se proponen.

§Factor de esquina: ajusta el factor de redondeo de de las esquinas en botones con formas que contemplan esquinas redondeadas o en cualquier caso no rectangulares.

§Unir forma de los botones: une los botones entre sí de modo que la forma elegida se aplica al bloque de botones como un conjunto.

En el recuadro Estilo de 3D están disponibles las opciones:

§Estilo: establece el aspecto del botón como Convexo, Plano, Convexo plano, Cóncavo, etc.

§Dirección de la luz: establece la dirección del efecto de luz configurado para el botón.

§Factor de difuminar: define el factor de difuminado que se aplicará al botón.

§Transparencia imagen: ajusta el factor de transparencia para las imágenes añadidas en los botones del Menú a través de las opciones correspondientes de la sección Elementos de menú.

Finalmente, el recuadro Borde 3D presenta las siguientes opciones:

§Estilo borde: define el estilo del borde del botón como Normal, Convexo, Cóncavo.

§Grosor externo / Grosor interno: definen el grosor externo e interno del borde del botón.

§Sólo borde exterior: se dibuja el borde según los ajustes definidos, no para cada botón, sino para todo el bloque de los botones considerados en su conjunto.


Estilo de menú desplegable

Paso 4 - Ajustes avanzados >

Estilo de menú desplegable

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos para proceder a la configuración de algunos ajustes avanzados relativos al estilo gráfico de los menús desplegables.

Los menús son creados y actualizados automáticamente por el programa de acuerdo al Mapa del Sitio diseñado en el Paso 2 - Creación de mapa. Los menús desplegables son aquellos visualizados al pasar el ratón sobre un elemento de nivel del Menú Principal.

Los comandos necesarios para proceder a la personalización de los botones están organizados en las siguientes secciones: General, Elementos de menú y Estilo de 3D.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Mediante los comandos de esta sección se configuran algunos ajustes generales del menú desplegable.

Ante todo es preciso definir el Tipo de menú que se quiere realizar eligiendo entre:

Ordenar en una columna: todos los elementos del menú desplegable están organizados en una única columna, uno tras otro.

Ordenar en más columnas: los elementos del menú desplegable están organizados en varias columnas, una junto a otra. Se crea automáticamente una nueva columna cuando:

§el número de elementos alcanza o supera el valor definido para la opción Elementos por columna;

§la lista de las páginas es interrumpida por un separador (ver Creación de mapa).

Además, si en la ventana Tonalidad de la plantilla o en la ventana Plantilla personalizada ha sido configurado el menú vertical, estará disponible también:

Acordeón vertical: todos los elementos del menú desplegable se organizan en una única columna, pulsando en un elemento, todos los elementos sucesivos se mueven hacia abajo dejando espacio para la visualización de los sub-elementos correspondientes.

Una vez elegido el Tipo de menú, es posible definir las opciones propuestas en el recuadro Estilo:

§Ancho: ajusta el valor en pixels de la anchura de los botones que contienen los elementos de Menú

§Margen: establece el valor en pixels del margen horizontal y del margen vertical, es decir del espacio existente entre el borde del botón y el texto contenido.

§Elementos por columna: activo solo para el tipo de Menú Ordenar en más columnas, define el número máximo de elementos que pueden estar contenidos en cada columna del menú desplegable.

Las opciones que están en el recuadro Texto son:

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: establece la alineación del texto a la izquierda, en el centro o a la derecha respecto al botón.

Por último, el recuadro Opciones presenta:

§Efecto: define el efecto de visualización para el menú desplegable, eligiendo entre Ninguno, Difuminado, Despliegue desde arriba, Despliegue desde la izquierda, Despliegue desde arriba a la izquierda.

§Preseleccionar la página actual: activo solo para el tipo de Menú Acordeón vertical, hace que en función de la página del sitio web abierta, el menú se despliegue automáticamente de manera que se pueda visualizar como seleccionado el elemento correspondiente.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Elementos de menú

Por medio de los comandos de esta sección se definen los colores, las imágenes de fondo y el estilo de los textos para los diferentes estados de los botones del menú desplegable.

En primer lugar es preciso seleccionar el Elemento de menú en el que se quiere trabajar: es posible definir el aspecto del [image] Elemento de menú, del [image] Elemento al pasar el ratón y del [image] Separador. Para seleccionar el Elemento del Menú se puede utilizar el menú desplegable o actuar directamente sobre la imagen de Vista previa que se actualiza constantemente según los cambios introducidos.

Para todos los elementos del menú es posible modificar las siguientes opciones del recuadro Estilo:

§Color Fondo / Color Texto / Color Borde: definen el color para el fondo, para el texto y para el borde del botón. Para el elemento Separador está disponible solamente el comando Color Texto.

§Estilo fuente: para los elementos Elemento al pasar el ratón y Separador, define el estilo del texto eligiendo entre Normal, Negrita, Cursiva y Negrita cursiva.

§Imagen de fondo: disponible solo para los elementos Elemento de menú y Elemento al pasar el ratón, permite definir la imagen que debe ser visualizada como fondo del botón. Para seleccionar la imagen que se quiere usar basta pulsar sobre el botón [image] para explorar los recursos disponibles: se pueden usar archivos en formato .JPG, .GIF y .PNG. Como alternativa, es posible pulsar en la flecha al lado del campo para abrir la librería de botones y seleccionar la imagen que se quiere usar.

§Icono de viñeta: permite definir la imagen que se debe utilizar como punto lista junto a los elementos de los botones o de los separadores insertados. También en este caso es preciso pulsar el botón [image] y seleccionar un archivo en formato .JPG, .GIF, .PNG.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo de 3D

Mediante los comandos de esta sección se definen la forma y el aspecto 3D de los botones.

Mediante las opciones disponibles en el recuadro Forma es posible definir:

§Forma: define la forma del botón, eligiéndola entre las que se proponen.

§Factor de esquina: ajusta el factor de redondeo de de las esquinas en botones con formas que contemplan esquinas redondeadas o en cualquier caso no rectangulares.

§Unir forma de los botones: une los botones entre sí de modo que la forma elegida se aplica al bloque de botones como un conjunto.

En el recuadro Estilo de 3D están disponibles las opciones:

§Estilo: establece el aspecto del botón como Convexo, Plano, Convexo plano, Cóncavo, etc.

§Dirección de la luz: establece la dirección del efecto de luz configurado para el botón.

§Factor de difuminar: define el factor de difuminado que se aplicará al botón.

§Transparencia imagen: ajusta el factor de transparencia para las imágenes añadidas en los botones del Menú a través de las opciones correspondientes de la sección Elementos de menú.

Finalmente, el recuadro Borde 3D presenta las siguientes opciones:

§Estilo borde: define el estilo del borde del botón como Normal, Convexo, Cóncavo.

§Grosor externo / Grosor interno: definen el grosor externo e interno del borde del botón.

§Sólo borde exterior: se dibuja el borde según los ajustes definidos, no para cada botón, sino para todo el bloque de los botones considerados en su conjunto.


Estilo de menú de la página

Paso 4 - Ajustes avanzados >

Estilo de menú de la página

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos para proceder a la configuración de algunos ajustes avanzados relativos al estilo gráfico de los botones del Menú de Página.

Los menús son creados y actualizados automáticamente por el programa de acuerdo al Mapa del Sitio diseñado en el Paso 2 - Creación de mapa. Los Menús de Página son aquellos que, opcionalmente, pueden ser visualizados para proponer la lista de las páginas del nivel actual. En otras palabras, si se abre una página que pertenece a un nivel y este nivel contiene también otras páginas, el Menú de Página propone la lista de todas las páginas de dicho nivel. Los Menús de Página se proponen siempre como menús verticales, situados a la derecha o a la izquierda de los contenidos de la página.

Los comandos necesarios para proceder a la personalización de los botones están organizados en las siguientes secciones: General y Elementos de menú.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Mediante los comandos de esta sección se configuran algunos ajustes generales del Menú de Página.

Antes de nada, si se desea que se muestre un menú de página que contenga la lista de las páginas del nivel actual, es preciso activar la opción Mostrar menú de la página.

Hecho esto, es posible cambiar las opciones del recuadro Estilo:

§Posición del menú: permite especificar si el Menú de Página debe mostrarse en el lado derecho o izquierdo de la página.

§Ancho: ajusta el valor en pixels de la anchura de los botones que contienen los elementos de Menú

§Margen: establece el valor en pixels del margen horizontal y del margen vertical, es decir del espacio existente entre el borde del botón y el texto contenido.

§Distancia entre botones: ajusta el valor en pixels del margen externo, es decir del espacio existente entre un botón y otro.

Las opciones que están en el recuadro Texto son:

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: establece la alineación del texto a la izquierda, en el centro o a la derecha respecto al botón.

Por último, el recuadro Borde da la posibilidad de dibujar un borde en torno al menú de página (no en torno a los botones), definiendo las siguientes opciones:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Elementos de menú

Por medio de los comandos de esta sección se definen algunos parámetros gráficos para definir el aspecto de los elementos del Menú de Página.

En primer lugar es preciso seleccionar el Elemento de menú en el que se quiere trabajar: es posible definir el aspecto del [image] Elemento de menú, del [image] Artículo al pasar el ratón/Página actual, del [image] Separador y del [image] Separador de líneas. Para seleccionar el Elemento del Menú se puede utilizar el menú desplegable o actuar directamente sobre la imagen de Vista previa que se actualiza constantemente según los cambios introducidos.

§Color Fondo / Color Texto / Color de línea: definen el color para el fondo y para el texto del Elemento de menú, del Artículo al pasar el ratón/Página actual y del Separador, además del color de la línea para el Separador de líneas.

§Icono de viñeta: disponible para los elementos Elemento de menú, Artículo al pasar el ratón/Página actual y Separador, importa la imagen (archivo en formato .JPG, .GIF, .PNG) que debe preceder a los elementos del Menú de Página, como si se tratase de un punto de lista.

§Estilo fuente: para los elementos Artículo al pasar el ratón/Página actual y Separador, establece el estilo del texto eligiendo entre Normal, Negrita, Cursiva y Negrita cursiva.

§Estilo de línea: disponible solo para el elemento Separador de líneas, define el tipo de trazo a elegir entre entre Sólido, Guión, Punto, Bajo relieve, Alto relieve.


Estilos y Modelos

Paso 4 - Ajustes avanzados >

Estilos y Modelos

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana ofrece los comandos para definir los estilos que se quiere aplicar a los diferentes elementos de texto presentes en las páginas, a la ventana ShowBox vinculada a elementos como el Objeto de Galería y el Objeto de Lista de Productos, a los tooltips que pueden estar asociados a los Enlaces y a los emails creados si se utiliza el Objeto Formulario de envío e-mail o si se crea un Carrito de la compra.

Un Estilo puede ser genéricamente definido como un conjunto de ajustes relativos al formato del texto y al aspecto gráfico que se puede aplicar a un elemento para modificar su aspecto. Así pues, la aplicación de un Estilo permite aplicar varios formatos simultáneamente con una única operación.

Los comandos necesarios para proceder a la definición de los estilos están organizados en las siguientes secciones: Textos, ShowBox, Tooltip y E-mail.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Textos

Mediante los comandos de esta sección se pueden definir los estilos que se pueden utilizar para los textos del sitio.

Ante todo es preciso elegir el Elemento de página del que se quiere definir el Estilo, seleccionándolo a través del menú desplegable disponible o, como alternativa, pulsando directamente sobre el elemento correspondiente en la vista previa.

Los Elementos de Página para los que se identifica y aplica un Estilo son:

Titulo de la página: es el título de las diferentes páginas del sitio web. Se toma del nombre dado a las páginas en el proceso de construcción del Mapa del Sitio en la ventana Creación de mapa o, si se hubiese especificado otro nombre, del Título completo de la página de la ventana Propiedades de la página.

Ruta de acceso de la página: es el texto que aparece inmediatamente debajo del título de la página, mediante el que se reconstruye el recorrido lógico (navegación con breadcrumbs o "migas de pan") que lleva a esa Página. La ruta de acceso lógica la reconstruye automáticamente el programa.

Texto de la página: es el texto de cada uno de los párrafos insertados mediante el Objeto de Texto. El estilo de este elemento es aplicado por defecto al abrir el editor del Objeto de Texto: después, mediante los comandos puestos a disposición por el editor mismo, es posible efectuar ulteriores modificaciones y personalizaciones. El estilo definido por este tipo de elemento se aplica también a todos los textos creados e insertados automáticamente por el programa, como por ejemplo las páginas del Área reservada, del Blog, del Motor de búsqueda interno y del Mapa del Sitio.

Enlace activo / Enlace al pasar encima el ratón / Enlace ya visitado: son los enlaces de hipertexto creados por medio del Objeto de Texto. Un enlace puede presentar una apariencia diferente dependiendo del estado que asuma: activo, ante el paso del puntero del ratón (efecto onMouseover) o "ya visitado". Distinguir visualmente un enlace activo de un enlace ya visitado es útil para simplificar la navegación del visitante pues le recuerda qué secciones ha explorado ya.

Campo / Botón: son los campos y los botones de los formularios creados mediante el Objeto Formulario de envío e-mail o el Carrito de la compra de comercio electrónico, además de elementos como el Campo de Búsqueda (ver Editor de plantilla | Insertar campo de búsqueda), los campos de acceso/salir relacionados con el Área Reservada, etc. El estilo de estos elementos se aplica por defecto cuando se crea un nuevo Objeto Formulario de envío e-mail: más tarde será posible modificar estos ajustes para cada formulario mediante las opciones disponibles en la sección Objeto Formulario de envío e-mail | Estilo.

Menú del pie de página: es el Menú, presente en el pie de cada página, en el que se proponen nuevamente las opciones del Menú Principal.

Seleccionando el Elemento de página, es posible modificar su estilo cambiando las siguientes opciones incluidas en el recuadro Estilo:

§Visualizar: hace que el elemento de página sea visible o no. Esta opción, como es lógico, no está disponible para el Texto de la página, los diferentes estados del enlace, los campos y los botones que no pueden ser invisibles. Es importante especificar que hacer invisible un elemento de la página no significa eliminarlo también del código de la página: se puede, por ejemplo, hacer invisible el Titulo de la página porque se prefiere insertarlo como imagen. Pero, también en este caso, no se eliminará el tag <title> del código HTML.

§Color Fondo / Color Texto: especifican el color del fondo y del texto del elemento de página seleccionado. Solo para el Texto de la página no es posible definir el color del fondo ya que este se ajusta en función de la plantilla elegida (ver Tonalidad de la plantilla, o Plantilla personalizada) y/o del Estilo de celdas en el que está insertado el Objeto de Texto.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: especifica el alineamiento del elemento de página, a elegir entre Izquierda, Centro y Derecha. Esta opción no está disponible para los diferentes estados del enlace, ya que el alineamiento del enlace de hipertexto es definido, independientemente del Estilo, durante el proceso de creación del Objeto de Texto; ni para los campos y botones.

§Estilo del texto: disponible solo para el enlace en los diferentes estados, configura el estilo del texto como Normal o Subrayado.

§Puntero: disponible solo para el Enlace activo, y tomado automáticamente también de los otros dos estados del enlace, especifica el aspecto que asume el puntero del ratón al paso sobre el enlace. Pulsando en [image] se puede seleccionar el archivo .CUR, .ICO que se desea utilizar.

§Color Borde: especifica el color de los bordes que se pueden añadir al Titulo de la página, a la Ruta de acceso de la página, al Campo, Botón y al Menú del pie de página.

§Esquinas redondeadas: define el factor de redondeo de las esquinas del Campo y del Botón, también individualmente.

§Sombra: aplica una sombra dentro del Campo, definiendo su color, la posición, la difusión y el tamaño.

§Margen horizontal: permite especificar el margen horizontal para el Titulo de la página, la Ruta de acceso de la página y el Menú del pie de página.
Pulsar para expandir/reducir Referencia: Los comandos de la sección ShowBox

Por medio de los comandos de esta sección se define el Estilo de la ventana ShowBox utilizada en las galerías (ver Objeto de Galería), en el enlace Galería con ShowBox (ver Enlace | Acción) y en el Objeto de Lista de Productos. En todos los casos la ventana ShowBox se abre a través de un enlace y sirve para mostrar una imagen ampliada, un vídeo o toda una secuencia de imágenes. Pulsando el enlace, la ventana del explorador se oscurece para resaltar la ventana ShowBox, que se muestra superpuesta según el efecto de entrada definido.

Las opciones disponibles en la sección Estilo son:

§Efecto: define un efecto de entrada para la ventana ShowBox a elegir entre Ninguno, Disolver, Desplazar desde arriba, Zoom, Zoom y ocultar la imagen de inicio. Los efectos Zoom y Zoom y ocultar la imagen de inicio son similares entre sí pero se distinguen por el hecho de que la imagen de partida permanece visible durante la ampliación en un caso, y en el otro no. El efecto Zoom y ocultar la imagen de inicio está por esta razón especialmente indicado para cuando el enlace que provoca la visualización de la ventana ShowBox está asociado a una imagen y no a un texto.

§Color exterior / Color interior: definen el color del fondo exterior y/o interior de la ventana ShowBox. El color del fondo exterior es el que se hace semi-transparente (en función del valor especificado por la opción Opacidad del fondo) y es utilizado para oscurecer la ventana del explorador que queda debajo.

§Opacidad del fondo: ajusta el valor de opacidad del fondo externo. Cuanto más alto sea el valor de la opacidad, menos visible será la ventana del navegador que está debajo.

Las opciones que están en el recuadro Texto son:

§Color Texto: define el color para el texto de la ventana ShowBox.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: establece la alineación del texto a la Izquierda, al Centro o a la Derecha respecto de la ventana ShowBox.

El recuadro Borde presenta las siguientes opciones:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Tooltip

Por medio de los comandos de esta sección se define el Estilo que se quiere aplicar a los Tooltips asociados a los enlaces insertados en textos o imágenes por medio del comando Inserisci collegamento Enlace. El Tooltip es un breve texto de ayuda, mostrado dentro de un cuadro al pasar el puntero del ratón sobre un enlace. Su función es ofrecer una explicación sobre qué ocurrirá pulsándolo.

Para definir el aspecto de los ToolTips es posible, en primer lugar, utilizar las opciones presentes el recuadro Estilo:

§Posición Tooltip: especifica la posición de los tooltips respecto al enlace al que están asociados, eligiendo entre Arriba, Abajo, Izquierda y Derecha.

§Efecto: configura un efecto de aparición para el tooltip, a elegir entre Ninguno, Disolver y Efecto rebote.

§Color Fondo: define el color del fondo de los tooltips.

§Opacidad del fondo: ajusta el valor de opacidad del fondo externo. Cuanto más alto sea el valor de la opacidad, menos visible será la ventana del navegador que está debajo.

§Mostrar cola: permite añadir al baloon (esto es, la forma, el bocadillo) de los ToolTips una flecha en dirección del enlace al que están asociadas.

Por último, las opciones que están en el recuadro Texto son:

§Color Texto: define el color para el texto de los tooltips.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: establece la alineación del texto a la Izquierda, al Centro o a la Derecha respecto del tooltip.

El recuadro Borde presenta las siguientes opciones:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.

Los ajustes de Estilo son válidos para todo el Proyecto y, por lo tanto, todos los ToolTips tendrán el mismo aspecto gráfico. Para definir el contenido (texto e imagen) de cada Tooltip es necesario usar la ventana Enlace | Descripción.
Pulsar para expandir/reducir Referencia: Los comandos de la sección E-mail

Por medio de los comandos de esta sección se define el Estilo de los emails creados por el Objeto Formulario de envío e-mail o por el Carrito de la compra.

Ante todo es preciso seleccionar el Elemento de e-mail del que se quiere definir el Estilo, seleccionándolo a través del menú desplegable disponible o, como alternativa, pulsando directamente sobre el elemento correspondiente en la vista previa.

Los elementos del email para los que se identifica y aplica un Estilo son:

Diseño del e-mail: los correos electrónicos creados por el programa tienen todos una idéntica estructura que prevé un marco externo de fondo y un cuerpo central con el mensaje. Entre el marco externo y el cuerpo central se puede predisponer también un borde que separe o cree profundidad y grosor.

Imagen/Logotipo de la empresa: es una imagen que puede ser añadida al encabezamiento del correo electrónico. Se puede insertar un simple logotipo empresarial o un banner que llega a ocupar toda la anchura de los correos electrónicos.

Contenido del mensaje: es el cuerpo del correo electrónico donde se escribe el mensaje.

Nota de pie de página: son las notas de cierre de los correos electrónicos que, en general, contienen un mensaje estándar y se distinguen visualmente del cuerpo del mensaje, al menos por el hecho de tener un tamaño de fuente inferior.

En función del Elemento de e-mail seleccionado es posible modificar diferentes opciones presentadas en la sección Estilo:

Diseño del e-mail

§Color Fondo: especifica el color del fondo exterior, es decir del marco del email.

§Color Borde / Grosor: especifican el color y el grosor del borde que separa el marco exterior del cuerpo del email.

Imagen/Logotipo de la empresa

§Archivo imagen: selecciona la imagen que se quiere insertar en el encabezado del email. Basta pulsar en [image] para seleccionar el archivo gráfico en formato .JPG, .GIF o .PNG que se desea importar.

§Alineación: especifica el alineamiento de la imagen insertada, a elegir entre Izquierda, Centro y Derecha.

§Posición: permite especificar si la imagen insertada debe ser situada en el Interior del marco o Exterior del marco en relación al cuerpo del email.

§Ancho: indica automáticamente la anchura original de la imagen y permite modificarla libremente. La anchura máxima para las imágenes es de 700 píxeles y depende de la estructura del correo electrónico. Este parámetro garantiza una correcta visualización por parte de todos los clientes de correo electrónico.

Contenido del mensaje

§Color Fondo: especifica el color del fondo del texto del mensaje del email.

§Color Texto: especifica el color del texto del mensaje del email.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

Nota de pie de página

§Color Fondo: especifica el color del fondo del texto de las notas que aparecen al cierre del email.

§Color Texto: especifica el color del texto de las notas que aparecen al cierre del email.

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Alineación: especifica el alineamiento de las notas a pie de página, a elegir entre Izquierda, Centro y Derecha.

§Posición: permite especificar si las notas a pie de página deben ser situadas en el Interior del marco o Exterior del marco en relación al cuerpo del email.

§Texto: permite componer el texto que debe ser presentado como nota a pie de página. Por defecto se propone un texto sobre la privacidad del mensaje.


Página de bienvenida

Paso 4 - Ajustes avanzados >

Página de bienvenida

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos necesarios para crear una página de introducción al sitio web y configurarla para permitir su consulta en diferentes idiomas.

Como indica su nombre, la Página de Bienvenida es una especie de portada inicial del sitio: por lo general presenta simplemente una imagen, un vídeo o una animación Flash y permite acceder a la verdadera Página de Inicio al final de un lapso de tiempo prefijado o haciendo clic en un botón. Si así se desea, esta página introductora puede presentar también los botones para elegir el idioma de consulta del sitio.

Pulsar para expandir/reducir Referencia: Los comandos para configurar una Página de Bienvenida

Puesto que la página de bienvenida es un elemento opcional de un sitio web, para que sea introducida es necesario, en primer lugar, activar la opción Mostrar la página de bienvenida. La Página de Bienvenida es la primera que se muestra, y solo al terminar un tiempo predeterminado o al hacer clic en un enlace incluido para ello, aparece la Página de Inicio del sitio web.

Es posible elaborar la Página de Bienvenida definiendo su fondo y su contenido, además de añadir una banda sonora si se quiere.

Las opciones presentadas en el recuadro Contenido de la página son:

§Tipo: especifica qué tipo de contenido será incluido en la Página de Bienvenida, eligiendo entre Imagen, Animación Flash, Vídeo y Código HTML.

§Archivo: activa si se elige como Tipo de contenido la Imagen, la Animación Flash o el Vídeo, importa el archivo gráfico (en formato .JPG, .GIF o .PNG), el archivo de animación Flash (en formato .SWF) o el archivo de vídeo (en formato .FLV, .MP4, .WEBM, .OGG) que se quiere utilizar.

§Código HTML: activa si se elige como Tipo de contenido el Código HTML, permite introducir el código que se quiere insertar en la página de bienvenida. La Barra de Herramientas que se muestra ofrece los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan el texto seleccionado.

Deshacer [CTRL+Z] - Restablecer [ALT+MAIUSC+BACKSPACE]

Anulan y restablecen la última operación realizada/anulada.

Insertar Widgets

Inserta el código referido al Widget seleccionado: pulsando sobre la flecha al lado del botón es posible visualizar la lista de todos los Widgets disponibles, tomados de la lista del Objeto HTML y Widgets. Haciendo clic sobre el Widget deseado se abre la ventana Widget mediante la cual es posible definir los parámetros previstos. Confirmando se genera el código HTML relativo al Widget y se inserta automáticamente en el editor

§Tamaño: especifica el tamaño en píxeles del ancho y el alto de la imagen, de la animación Flash, del vídeo o del código HTML añadidos. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

Las opciones presentadas en el recuadro Fondo de la página son:

§Color Fondo: especifica el color de fondo de la página de bienvenida.

§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo.

§Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen se puede repetir solo en sentido horizontal, solo en sentido vertical o en ambos sentidos, de modo que ocupe todo el espacio disponible. Además es posible hacer que la imagen se adapte, es decir, que se redimensione de modo que cubra todo el fondo.

§Alineación: especifica cómo debe ser alineada la imagen insertada respecto a la ventana del explorador.

Por último, el recuadro Opciones presenta las siguientes opciones:

§Sonido al entrar: permite especificar el archivo de audio (en formato .MP3) que se quiere utilizar como fondo musical durante la visualización de la página de bienvenida.

§Ir a la Página de inicio después de [seg.]: especifica cuántos segundos debe mostrarse la página de bienvenida. Una vez transcurrido el período de tiempo especificado, aparecerá automáticamente la Página de inicio.
Pulsar para expandir/reducir Referencia: Los comandos para configurar el idioma de consulta

Si el sitio debe poder ser consultado en varios idiomas y si se desea dar la posibilidad al visitante de seleccionar cuál utilizar mediante botones insertados en la Página de Bienvenida, es necesario en primer lugar activar la opción Mostrar vínculos a otros idiomas.

En el recuadro Lista de idiomas es preciso conformar la lista de idiomas en los que el sitio web estará disponible. Por defecto se propone una lista compuesta por 5 idiomas que, en cualquier caso, puede ser libremente modificada mediante los comandos disponibles:

§Agregar... / Eliminar: permiten elaborar la lista de idiomas de consulta dando la posibilidad, respectivamente, de añadir un nuevo idioma (mediante la ventana que se abre Configurar idioma) o de eliminar un idioma ya añadido.

§Subir / Bajar: modifican el orden en el que se muestran los idiomas ya añadidos, desplazando hacia arriba o hacia abajo el idioma seleccionado.

§Valor preestablecido: establece como "predefinido" el idioma seleccionado en la Lista de idiomas. Se debe configurar como "predeterminado" el idioma del sitio web al que los usuarios acceden inmediatamente, antes aún de efectuar la elección del idioma de consulta preferido. El sitio en el idioma predeterminado es el único que presenta la Página de Bienvenida (para más información, ver Cómo crear un sitio web multi-idioma).

§Editar...: abre la ventana Configurar idioma para modificar los parámetros configurados para el idioma seleccionado entre los ya añadidos en la Lista de idiomas.

Por último, está disponible la opción:

§Ejecutar el vínculo en una nueva ventana: activando esta opción, el sitio web se abrirá en una nueva ventana del explorador, distinta de la ya abierta en la Página de Bienvenida.

Aunque en la ventana relativa a la Página de Bienvenida se habla explícitamente de idiomas, es posible aprovechar esta configuración para permitir al usuario elegir no solo entre idiomas de consulta distintos sino, más genéricamente, entre distintas versiones de un mismo sitio web. Por ejemplo, se podría predisponer la elección entre "Versión HTML / Versión Flash" o entre "Versión apta para menores / Versión sólo para adultos".

Activando la visualización de una página de bienvenida, se mostrará automáticamente en el Mapa la página especial "Página de Bienvenida": es posible seleccionarla y abrir la ventana Propiedades de la página para definir sus propiedades principales.

Best practice:

- | Cómo manejar los Idiomas para los textos insertados en automático
- | Cómo crear un sitio web multi-idioma


Ventana Configurar idioma

Configurar idioma

Paso 4 - Ajustes avanzados > Página de bienvenida >

Configurar idioma

 Return to chapter overview

Esta ventana, que se abre pulsando el botón Agregar... o el botón Editar... de la ventana Página de bienvenida, permite configurar algunos parámetros referidos a un idioma en el que el sitio web está disponible para la consulta.

Las opciones disponibles son:

§Nombre de idioma que debe mostrarse: permite introducir el nombre del idioma que se desea poner a disposición. Pulsando en la flecha que hay al lado del campo se abre un menú desplegable con una lista de idiomas y en el que seleccionar el que se quiere añadir. Como alternativa, es también posible escribir directamente el nombre del idioma.

§Archivo de imagen para el idioma (ie: marcar): permite importar el archivo gráfico que se quiere utilizar para crear el botón asociado al idioma. Pulsando en [image] se puede seleccionar el archivo .JPG, .GIF o .PNG que se quiere utilizar, por ejemplo, para crear un botón con la imagen de una bandera referida al idioma.

En caso de que no se asocie ninguna imagen, en lugar de un botón gráfico se creará automáticamente un enlace de texto usando el Nombre de idioma que debe mostrarse como texto.

§Enlace para este idioma (muestra la página web en este idioma): configura un enlace para la imagen importada mediante la opción Archivo de imagen para el idioma (ie: marcar). Pulsando sobre el botón [image] se abre la ventana Enlace mediante la que es posible elegir el tipo de acción además de las opciones relacionadas.

Si, por ejemplo, el sitio web en el idioma indicado por la banderita ha sido ya publicado, es posible elegir la acción Archivo o URL y especificar el URL para enlazarlo (por ejemplo, http://www.misitio.es/en/index.html). En caso de estar configurando el idioma establecido como predefinido, no es posible definir ningún enlace, ya que la conexión a la página de inicio del sitio web es asociada automáticamente.

Nota sobre la compatibilidad con las versiones precedentes:

Respecto a la versión anterior, la 9, en esta versión 10 la ventana Configurar idioma presenta las siguientes novedades:

§La opción Carpeta del Servidor o URL del sitio web para este idioma se ha sustituido por la opción Enlace para este idioma (muestra la página web en este idioma): de esta manera es posible definir, como antes, el enlace que lleva a la carpeta del Servidor o al URL del sitio web en una lengua determinada, pero también realizar otras acciones.

§La opción Muestra la elección por este idioma pero avisa que todavía no está disponible ya no se ofrece dado que es posible crear un mensaje personalizado, configurando el enlace apropiado para la imagen de la banderita.

Best practice:

- | Cómo gestionar los idiomas para los textos añadidos automáticamente
- | Cómo crear un sitio web multi-idioma


Mensaje publicitario

Paso 4 - Ajustes avanzados >

Mensaje publicitario

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos mediante los que es posible añadir un Mensaje Publicitario en la Página de Inicio o en todas las páginas del sitio

El Mensaje Publicitario puede ser creado como una Imagen o una Animación Flash, mostrada en una posición determinada de la Página, en la que se dispone un enlace a una Landing Page (o Página de destino). Naturalmente, la página de destino, que no es otra cosa que una página interna del sitio web, deberá ser cuidadosamente estudiada para lograr convencer al visitante de completar la acción deseada: rellenar un formulario, efectuar una compra, etc.

Pulsar para expandir/reducir Referencia: Los comandos para añadir un Mensaje Publicitario

Si se desea añadir un Mensaje Publicitario es necesario en primer lugar activar la opción Mostrar el mensaje publicitario.

Es posible escoger el Tipo de mensaje que se quiere añadir, seleccionando uno de los siguientes elementos:

Mostrar anuncios en la esquina superior derecha: corresponde al efecto que es conocido habitualmente como PagePeel en el que, colocando el ratón en el ángulo superior derecho de la Página, se puede "hojear" descubriendo el mensaje publicitario que está debajo.

Mostrar anuncios en un cuadro: el mensaje publicitario se inserta en un recuadro, visualizado en una posición especificada de la ventana del explorador, en sobreimpresión respecto a los contenidos de la página.

Mostrar anuncios en una barra horizontal: el Mensaje Publicitario se presenta mediante una barra horizontal mostrada en lo alto de la ventana del explorador, antes del contenido real de la página; o sobre el fondo de la ventana del explorador, en sobreimpresión respecto a los contenidos de la página.

Para cualquier Tipo de mensaje que se haya seleccionado es posible cambiar las opciones del recuadro Ajustes:

§Archivo imagen: permite especificar al archivo gráfico (en formato .JPG, .GIF, .PNG) o el archivo de la Animación Flash (en formato .SWF) que contiene el Mensaje Publicitario que se desea proponer.

Para Mostrar anuncios en la esquina superior derecha las otras opciones disponibles son:

§Estilo: permite elegir, además del clásico efecto de la esquina de la página doblado (PagePeel), también entre otras animaciones temáticas. El funcionamiento del efecto permanece igualmente inalterado: al pasar el ratón sobre la animación, el visitante abre el Mensaje Publicitario propiamente dicho.

§Ancho/altura: permite especificar el valor en píxeles que deben tener la anchura y la altura del área destinada a mostrar el Mensaje Publicitario.

Para Mostrar anuncios en un cuadro las otras opciones disponibles son:

§Posición: establece dónde se mostrará el Mensaje Publicitario dentro de la ventana del explorador. Es posible posicionarlo en el centro, arriba a la izquierda, arriba a la derecha, abajo a la izquierda o abajo a la derecha.

§Efecto: añade un efecto de visualización a elegir entre Disolver, Barrido descendente, Barrido ascendente, Barrido a la derecha, Barrido a la izquierda.

§Mostrar este mensaje una sola vez: si está activada, esta opción hace que el mensaje publicitario sea visualizado sólo una vez, en la primera apertura de una página del sitio. Abriendo una nueva sesión de navegación, el mensaje publicitario será propuesto de nuevo.

Por último, para Mostrar anuncios en una barra horizontal las otras opciones disponibles son:

§Posición: permite definir si la barra con el Mensaje publicitario debe ser mostrada arriba, antes de los contenidos de la página, o al fondo, en sobreimpresión sobre la parte final de la Página.

§Color Fondo: permite definir el color para el fondo de la barra horizontal que contiene el Mensaje Publicitario.

§Mostrar este mensaje una sola vez: si está activada, esta opción hace que el mensaje publicitario sea visualizado sólo una vez, en la primera apertura de una página del sitio. Abriendo una nueva sesión de navegación, el mensaje publicitario será propuesto de nuevo.

Los elementos que están en el recuadro Opciones, comunes a cualquier tipo de mensaje, son:

§Enlace: configura el enlace (normalmente a una Página de destino o Landing Page) que se activará al pulsar sobre el Mensaje Publicitario. Pulsando sobre el botón [image] se abre la ventana Enlace mediante la que es posible elegir el tipo de acción además de las opciones relacionadas.

§Sonido al entrar: importa el archivo de sonido (en formato .MP3) que se reproducirá durante la visualización del Mensaje publicitario

¿Qué es una Página de destino?

La Página de destino (Landing Page) es una página destinada a acoger a un visitante y aparece porque está conectada, por ejemplo, a un enlace o a un banner publicitario. Como su nombre en inglés indica, es la página en la que el visitante "aterriza" y debe ser construida de manera que le permita encontrar inmediatamente la información que busca, evitándole tener que navegar en el Sitio en su busca.

El mecanismo puede ser fácilmente explicado con un ejemplo: publicamos un banner para hacer publicidad de la venta de un producto. La información que el banner transmite es poca y muy básica, pero podemos añadir un enlace para llevar al visitante interesado a nuestro sitio web. En este caso, es contraproducente enlazar directamente a la Página de Inicio de nuestro sitio web: es demasiado genérica y obligaría al visitante a emprender una navegación interna antes de poder encontrar la información necesaria sobre el producto y sobre cómo proceder a su compra. Se corre el riesgo de perder enseguida un cliente potencial. En cambio, la mejor solución es construir una página especial en la que presentar, con una disposición simple y funcional, toda la información que el visitante espera encontrar sore el producto anunciado en el banner, incluídas las instrucciones para proceder con la compra. Muy a menudo una página de este tipo debe ser construida aposta para esta función, pero, si está bien hecha, tiene la ventaja de guiar hacia el objetivo deseado (en el ejemplo, la compra de un producto) al visitante atraído por nuestro mensaje publicitario.

Por último, en el recuadro Modo de visualización están disponibles las opciones:

§Mostrar sólo en la Página de inicio / Mostrar en todas las páginas del sitio: permiten definir dónde se debe mostrar el Mensaje Publicitario, si solo en la Página de Inicio o bien en todas las páginas del sitio web.


Blog

Paso 4 - Ajustes avanzados >

Blog

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana propone las herramientas y las opciones necesarias para crear un Blog y gestionar los comentarios que pueden dejar los usuarios como respuesta a los artículos publicados.

Un Blog es una especie de diario en la red en el que el autor cuenta aquello de lo que desea hablar mediante una serie de artículos (o Posts) publicados con frecuencia y regularidad variable.

Una vez publicado, el blog creado con WebSite X5 representa una sección independiente dentro del sitio web principal y se añade automáticamente en el Mapa a la carpeta de Páginas Especiales (ver Creación de mapa). Si se desea añadir el elemento "Blog" dentro del Menú de navegación, es necesario crear un Alias de la Página Especial seleccionándola y arrastrándola dentro de la carpeta del Menú.

Siendo parte integrante del sitio Web, el Blog comparte con él el aspecto gráfico, retomando automáticamente la plantilla gráfica empleada.

El blog creado se publica en la URL http://www.misitio.es/blog donde http://www.misitio.es es la URL del sitio web al que está vinculado.

En la página principal del blog se muestra la lista de todos los artículos (o Posts) publicados, dispuestos por orden cronológico. Para todos los artículos aparece indicado el título, el autor, categoría, fecha y hora de publicación, y, cuando están en forma reducida en lugar de completa, la descripción breve y el enlace "Leer todo". El enlace "Leer todo" lleva a una página dedicada enteramente a un solo post: en este caso se muestra todo el texto del artículo, seguido de la lista de comentarios ya publicados y del formulario que los lectores pueden utilizar para enviar un nuevo comentario.

Más allá de los contenidos, todas las páginas del blog presentan una estructura análoga, con una columna en el lado derecho dedicada a la presentación de herramientas como la sección con los artículos recientes, el archivo por meses o por categorías, las nubes. En función de las propias necesidades, es posible personalizar esta columna y decidir qué herramientas poner a disposición y en qué orden presentarlas.

Por último, como se ha dicho, una de las peculiaridades de los blogs es permitir dejar un comentario a quien lee los artículos. Así, partiendo de la idea del post publicado, se puede desarrollar una discusión entre el autor y los lectores. Para evitar que sean publicados comentarios no deseados -porque son ofensivos o no pertinentes en el tema-, es necesario poder moderarlos. Para ello, WebSite X5 ofrece un Panel de control en línea.

Para crear un blog basta configurar algunos parámetros generales y crear la lista de noticias que se quiere distribuir.

Una vez configurado, será necesario mantener vivo el interés de los lectores publicando con una cierta regularidad y frecuencia nuevos posts. Con este fin, en la fase de exportación será posible publicar solo las actualizaciones relativas al blog con la opción Exportar solamente Blog y RSS disponible en la ventana Exportación del sitio a Internet.

Los comandos necesarios para configurar el blog y proceder a la creación de artículos se recogen en tres secciones: Artículos, Diseño y Comentarios.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Artículos

Mediante los comandos de esta sección se configuran algunos parámetros generales y se procede a la creación de la lista de artículos (o posts) que se publicarán en el blog.

En el recuadro Ajustes generales están incluidas las siguientes opciones:

§Título: en este campo se puede introducir el título que se quiere dar al blog. Este título se mostrará en la barra del título del explorador y es, obviamente, un parámetro importante para permitir localizar correctamente el blog a usuarios y motores de búsqueda.

Si no se especifica ningún título para el blog, se toma automáticamente el título asociado al sitio web mediante la opción correspondiente de la ventana Ajustes generales | General.

§Descripción: en este campo se puede introducir una breve descripción del blog. Es preferible que el contenido de la descripción sea conciso, eficaz y significativo para el blog al que se refiere, ya que esta descripción se utilizará en el código HTML como contenido del metatag <description> y será analizada por los spiders de los motores de búsqueda.

También en este caso, si no se especifica una descripción para el blog, se toma automáticamente la descripción asociada al sitio web mediante la opción correspondiente de la ventana Ajustes generales | General.

§Crear una sindicación web (Feed RSS) que incluya el contenido del blog: activa por defecto, hace que se cree automáticamente una fuente RSS con todos los artículos del blog. La ruta de las fuentes RSS del blog es http://www.misitio.es/blog/x5feed.xml donde http://www.misitio.es es la URL del sitio web al que está vinculado.

En el recuadro Lista de artículos se ofrece una tabla-resumen que indica el Título, el Autor, la Categoría de pertenencia y la Fecha de publicación de tods los posts ya publicados y los comandos necesarios para crear y gestionar los artículos:

§Agregar...: abre la ventana Predisposiciones artículo para proceder a la inserción de un nuevo artículo.

§Eliminar: elimina el artículo seleccionado entre los que hay en la Lista de artículos.

§Editar...: abre la ventana Predisposiciones artículo para modificar el artículo seleccionado entre los que hay en la Lista de artículos.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Diseño

Mediante los comandos de esta sección se configuran algunos aspectos gráficos del blog.

En el recuadro Ajustes generales están disponibles las siguientes opciones:

§Vista de Artículos: permite definir cómo se mostrarán los artículos en la página inicial del blog. Se puede ajustar para que solo el primer artículo se muestre completo y todos los demás reducidos, que todos estén completos o todos se muestren reducidos. Los artículos mostrados en forma reducida presentan solo una descripción breve seguida del enlace "Leer todo".

§Mostrar botón 'AddThis' para compartir su sitio web en las redes sociales.: activando esta opción, bajo cada post del blog se añadirá automáticamente el botón "AddThis". Pulsando este botón el lector verá un submenú con una lista de las redes sociales más conocidas. Si tiene un perfil en alguna de estas redes, podrá seleccionarla y compartir el enlace al post con sus contactos.

§Tipo de botón: permite definir el aspecto del botón "AddThis" eligiendo entre las gráficas propuestas en el menu desplegable.

§Cuenta 'AddThis': permite, si se dispone de una cuenta 'AddThis', especificarla. Tener una cuenta permite visualizar algunas estadísticas sobre el uso hecho por los lectores del servicio AddThis.

Para mayor información sobre el servicio AddThis y para registrar una cuenta, pulsar el botón [image] y acceder al sitio web oficial: www.addthis.com.

En el recuadro Bloques laterales se ofrece una tabla-resumen que indica el Título, el tipo y el Ancho de todos los bloques de contenido añadidos a la barra lateral y los comandos necesarios para crear la lista de estos bloques:

§Agregar...: abre la ventana Bloque lateral para proceder a la inserción de un nuevo bloque.

§Duplicar: crea una copia del bloque seleccionado entre los ya añadidos.

§Eliminar: borra el bloque seleccionado de los existentes en la lista Bloques laterales.

§Subir / Bajar: modifican el orden de visualización de los bloques ya añadidos en la lista Bloques laterales, desplazando hacia arriba o hacia abajo el bloque seleccionado.

§Editar...: abre la ventana Bloque lateral para modificar el bloque seleccionado de los existentes en la lista Bloques laterales.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Comentarios

A través de los comandos de esta sección se gestiona la publicación de los comentarios dejados por los visitantes para los artículos publicados en el blog.

En primer lugar, es necesario activar la opción Permitir la inserción de comentarios para los artículos del blog para permitir a los visitantes dejar comentarios a los artículos publicados en el blog.

Una vez hecho esto, se debe especificar el Tipo de contenido eligiendo entre:

Comentario y votación: los visitantes podrán escribir un comentario y también expresar un voto.

Comentario: los visitantes podrán dejar un comentario, pero no votar.

Votación: los visitantes podrán votar pero sin dejar ningún comentario.

Las opciones disponibles en la sección Configuración de comentarios son:

§Modo de visualización: establece si los comentarios que dejan los visitantes se pueden ver online inmediatamente o si es necesario que primero sean aprobados mediante los comandos del Panel de control online.

§Orden de visualización: define en qué orden cronológico se mostrarán los comentarios publicados, si del más reciente al más antiguo o viceversa.

§Mostrar el botón 'Denunciar abuso': hace que esté a disposición de los visitantes el botón "Abuso", mediante el que pueden señalar posibles comportamientos inadecuados.

§Activar el control anti-spam 'Captcha': añade el control anti-spam Captcha al final del formulario para la publicación de un comentario. Se mostrará una imagen de algunas letras distorsionadas sobre un fondo confuso, el visitante deberá copiar correctamente estas letras en un campo al efecto para poder enviar el comentario.

§Estilo de votación: define el estilo del elemento gráfico (por ejemplo, una serie de 5 estrellitas) propuesto al visitante para que exprese su voto. Esta es la única opción disponible si se selecciona Votación como Tipo de contenido.

En las secciones Modo de guardado de los datos es posible especificar cómo los datos recogidos a través del formulario que hay que rellenar para publicar un comentario son guardados y enviados al administrador del sitio web:

§Subcarpeta del servidor en la que guardar los datos: especifica en qué subcarpeta de la carpeta en el Servidor con acceso de escritura mediante PHP deben ser guardados los datos. La carpeta principal en el Servidor es la que se definió con la opción Carpeta de servidor con acceso de escritura que hay en la ventana Gestiónde datos. Si no e especifica ninguna subcarpeta, los datos se guardan directamente en la carpeta principal en el Servidor.

§Envía un email de notificación de la recepción de un comentario: hace que se envíe automáticamente un email de notificación cuando se reciben nuevos datos.

§E-mail de destino: especifica la dirección a la que debe ser enviado el email de notificación de recepción de datos.

Normalmente, los proveedores permiten el acceso de escritura para cualquier carpeta del Servidor, en ese caso no es necesario especificar ninguna ruta para la carpeta pública. En caso contrario, para conocer la ruta completa de la carpeta pública es necesario ponerse en contacto con el proveedor del espacio Web.

Mediante la sección Prueba WebSite del Panel de control online es posible verificar si la carpeta con acceso de escritura especificada y sus posibles subcarpetas existen y, si es así, si efectivamente consienten la escritura de datos.

Al crear un blog, se muestra automáticamente en el Mapa la página especial "Blog": es posible seleccionarla y abrir la ventana Propiedades de la página para definir sus propiedades principales.

Best practice:

-

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea.

Profundización:

-

Panel de control en línea


Ventana Predisposiciones artículo

Blog | Predisposiciones artículo

Paso 4 - Ajustes avanzados > Blog >

Blog | Predisposiciones artículo

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Predisposiciones artículo, abierta con el comando Agregar... o con el comando Editar... de la ventana Blog | Artículos, da la posibilidad de crear o modificar un artículo del blog.

Esta ventana tiene dos secciones y está articulada en las siguientes secciones: General y Avanzado.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Los comandos disponibles en esta sección son:

§Título: establece el título del artículo.

§Fecha de publicación: ajusta la fecha de publicación del artículo seleccionándola mediante un calendario al efecto.

§Autor: especifica el autor del artículo introduciéndolo directamente en el campo, o bien seleccionando un nombre de la lista desplegable entre los que fueron añadidos precedentemente.

§Categoría: permite especificar la categoría a la que pertenece el artículo. Como para el campo Autor, es posible introducir el nombre de una nueva categoría o seleccionar una de las categorías ya introducidas precedentemente.

§Etiqueta: permite especificar una lista de etiquetas (tag), esto es, breves descripciones de conceptos clave asociados al artículo. Es posible asociar más de una etiqueta para cada artículo, escribiéndolas una tras otra, separadas por una coma (por ejemplo: " etiqueta1, etiqueta2, etiqueta3, ...").

§Contenido: permite elaborar el artículo mediante un editor análogo al disponible para el Objeto de Texto.

§Descripción breve: especifica una breve descripción del artículo.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Avanzado

Los comandos disponibles en esta sección son:

§Audio/Vídeo conectado: permite especificar un archivo de audio (en formato .MP3, .WMA, .WAV, .MID, .AIF, .M4A) o un archivo de vídeo (en formato .MP4, .FLV, .AVI, .WMV, .MPG, .MOV) para asociarlo al artículo. Utilizando esta opción, se crea automáticamente un enlace al archivo de audio/vídeo mostrado al pie del artículo.

Es posible hacer que el vídeo sea visualizado directamente en el interior de un artículo, insertando manualmente el código HTML necesario en el editor de texto durante la elaboración del post mismo.

Por ejemplo, es posible copiar el código de un vídeo YouTube™ tal como se suministra en el portal y pegarlo dentro del post.

§Fuentes de la noticia: permite elaborar la lista de las fuentes utilizadas para escribir el artículo mediante los siguientes comandos:

-Agregar... / Eliminar: añaden una nueva fuente o eliminan la fuente seleccionada.

-Subir / Bajar: modifican el orden en el que se muestran las fuentes ya añadidas, desplazando hacia arriba o hacia abajo la fuente seleccionada.

-Editar: modifica el elemento selecccionado. También se puede hacer clic una segunda vez en un elemento ya seleccionado para poder modificarlo. Para añadir correctamente una fuente es preciso escribir el nombre del sitio web seguido del URL escrito entre < > (por ejemlo: "WebSite X5 <http://www.websitex5.com>"): como fuente aparecerá solo el texto y el URL será utilizado para crear el enlace asociado al mismo.

§No habilitar los comentarios para este artículo: activando esta opción se impide a los visitantes dejar comentarios para el artículo.

Best practice:

-

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea

Profundización:

-

Panel de control en línea


Ventana Bloque lateral

Blog | Bloque lateral

Paso 4 - Ajustes avanzados > Blog >

Blog | Bloque lateral

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Bloque lateral, abierta con el comando Agregar , y el comando Editar de la ventana Blog | Diseño, permite proceder efectivamente a la definición de bloques de contenido que se quieren ofrecer en la columna lateral de todas las páginas del blog.

Esta ventana presenta las siguientes secciones: General y Estilo.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Mediante los comandos presentes en esta sección se crea la lista de los bloques que completarán la página del blog.

Los tipos de bloques entre los que se puede elegir son:

Artículos recientes: Bloque en el que aparecen todos los posts más recientes publicados en el Blog. Haciendo clic en el título se accede a la página donde es posible leer el artículo.

Categorías: Bloque en el que se ve la lista de todas las Categorías en las que están organizados los posts del blog. Haciendo clic en una categoría se muestra la lista de los artículos publicados en ella.

Artículos mensuales: Bloque en el que aparece la lista de los posts publicados, organizados por mes.

Nubes: Bloque en el que aparece la lista de todas las categorías o de todas etiquetas asociadas a los artículos publicados. En este caso los nombres de las categorías o las etiquetas se muestran con tamaños diferentes dependiendo del número de posts relacionados: a mayor número de posts relacionados, mayor es el tamaño de las letras de los nombres. Haciendo clic en un elemento (Categoría o Etiqueta) se muestra la lista de los artículos relacionados con él.

Blogs amigos: Bloque para la visualización de la lista de los sitios web amigos, es decir otros sitios web o blogs que se desea enlazar para sugerir a los lectores que los visiten.

Facebook: Bloque que mediante el plug-in socal "Like Box" de Facebook permite al usuario:

§ver a cuántas personas y/o a cuántos de sus amigos les gusta la página de Facebook sugerida,

§leer los posts recientes publicados en la página de Facebook sugerida,

§decir que la página de Facebook le gusta sin tener necesariamente que visitarla.

Anuncios de Google AdSense: Bloque para la visualización de los mensajes publicitarios proporcionados por el circuito Google AdSense™.

Código HTML: Bloque completamente personalizable que puede ser utilizado para insertar cualquier función no añadida automáticamente por el programa.

En función del tipo de Bloque seleccionado, se presentan distintas opciones configurables.

Las opciones comunes a todos los Bloques son:

§Título: permite insertar el título que se asociará y se mostrará para el Bloque.

§Ancho: establece la anchura en píxeles del bloque.

Además de las opciones comunes, para cada tipo de bloque se añaden las siguientes opciones específicas:

Artículos recientes / Categorías /

Artículos mensuales:

§Número máximo de elementos: permite especificar el número máximo de elementos que ver dentro del bloque.

Nubes:

§Mostrar categorías en una nube / Mostrar etiquetas en una nube: establece si en el bloque Nubes se deben indicar las categorías o las etiquetas utilizadas para los artículos ya publicados.

Blogs amigos:

§Lista de blogs amigos: permite elaborar la lista de los sitios web amigos mediante los siguientes comandos:

-Agregar / Eliminar: añaden un nuevo sitio amigo o borran el sitio seleccionado.

-Subir / Bajar: modifican el orden en el que se muestran los sitios amigos ya añadidos, desplazando hacia arriba o hacia abajo el sitio seleccionado.

-Editar: modifica el elemento selecccionado. También se puede hacer clic una segunda vez en un elemento ya seleccionado para poder modificarlo.

Para añadir correctamente un sitio amigo es preciso escribir el nombre del sitio web seguido del URL escrito entre < > (por ejemlo: "WebSite X5 <http://www.websitex5.com>"): como sitio amigo aparecerá solo el texto y el URL será utilizado para crear el enlace asociado al mismo.

Facebook:

§URL de Facebook: permite especificar el URL de la página de Facebook que se desea sugerir.

§Color Fondo: establece un fondo claro u oscuro para el bloque.

§Altura: establece la altura en píxeles del bloque.

§Mostrar fotos amigos: activando esta opción, en el bloque se mostrarán también las fotos de perfil de los amigos (es decir de las conexiones).

§Mostrar últimos post: activando esta opción, en el bloque se mostrarán automáticamente los últimos posts publicados en el muro de la página de Facebook sugerida.

§Mostrar encabezado de FaceBook: activando esta opción, en el bloque se mostrará una cabecera de Facebook.

Anuncios de Google AdSense:

§Código HTML de Google AdSense: campo para introducir el código HTML proporcionado por Google AdSense™ para la visualización de un bloque de mensajes publicitarios.

Código HTML:

§Código HTML: campo para introducir el código HTML para crear un Bloque completamente personalizado.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Estilo

Mediante los comandos presentes en esta sección se configura el aspecto gráfico de los bloques de contenido que completan la página del blog.

Las opciones que están en el recuadro Texto son:

§Fuente: define el tipo de carácter, el estilo y el tamaño del texto.

§Color Texto: especifica el color que se utilizará para el texto.

§Margen: define el valor en píxeles para el margen, es decir el espacio entre el borde del bloque y el texto que contiene.

En el recuadro Fondo del sitio están disponibles las siguientes opciones:

§Color Fondo: especifica el color para usar como relleno del fondo.

§Archivo imagen: selecciona el archivo gráfico (.JPG, .GIF, .PNG.) de la imagen que se utilizará como fondo.

§Repetir: especifica si la imagen añadida como fondo debe repetirse o no. La imagen se puede repetir solo en sentido horizontal, solo en sentido vertical o en ambos sentidos, de modo que ocupe todo el espacio disponible. Además es posible hacer que la imagen se adapte, es decir, que se redimensione de modo que cubra todo el fondo.

§Alineación: permite especificar cómo se debe alinear la imagen insertada como fondo respecto al Bloque.

Por último, en el recuadro Borde están disponibles las siguientes opciones:

§Grosor: especifica el grosor de los bordes, también individualmente.

§Color: especifica el color de los bordes, también individualmente.

§Esquinas redondeadas: define el factor de redondeo de las esquinas, también individualmente.

§Sombra: aplica una sombra, definiendo su color, la posición, la difusión y el tamaño.

Best practice:

-

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea

Profundización:

-

Panel de control en línea


Sindicación web (Feed RSS)

Paso 4 - Ajustes avanzados >

Sindicación web (Feed RSS)

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta las herramientas y las opciones necesarias para crear una fuente RSS, uno de los formatos más conocidos para la distribución de contenidos Web.

La fuente RSS es un instrumento muy versátil para divulgar noticias, imágenes o vídeos: puede ser muy útil cuando se tienen muchas noticias que ofrecer con una cierta frecuencia, o cuando se quieren señalar acontecimientos, las actualizaciones efectuadas en un sitio web, nuevos posts o los comentarios publicados en un blog.

Suscribiéndose a la fuente RSS asociada al sitio web, los visitantes podrán ser constantemente informados y recibir/leer las noticias directamente a través de su programa agregador de noticias.

Pulsar para expandir/reducir Referencia: Los comandos para añadir una fuente RSS

Para crear una fuente RSS basta configurar algunos parámetros generales y crear la lista de las noticias que se quiere distribuir.

En el recuadro Lista de artículos se ofrece una tabla-resumen que indica el Título y la Fecha de publicación de todas las noticias ya añadidas y los comandos necesarios para crear la lista de las noticias:

§Agregar...: abre la ventana Predisposiciones artículo para proceder a la inserción de una nueva noticia.

§Eliminar: elimina la noticia seleccionada entre las que hay en laLista de artículos.

§Editar...: abre la ventana Predisposiciones artículo para modificar la noticia seleccionada entre las que hay en la Lista de artículos.

Además de crear el listado de noticias, es necesario definir los siguientes parámetros incluidos en el recuadro Ajustes generales:

§Título: (parámetro obligatorio) especifica el título de la fuente RSS vinculada al sitio web.

§Imagen: permite especificar una imagen (un archivo en formato .JPG, .GIF, .PNG) para asociarlo a la fuente RSS; esta imagen (generalmente el logotipo de la empresa o del sitio web) será mostrada por el programa agregador de noticias.

§Descripción: (parámetro obligatorio) especifica una descripción de la fuente RSS vinculada al sitio web.

Cuando se prueba localmente el funcionamiento de la página web creada, una ventana de aviso advierte que los Feed RSS se mostrarán solamente una vez que la página web sea publicada online.


Ventana Predisposiciones artículo

Sindicación web (Feed RSS) | Predisposiciones artículo

Paso 4 - Ajustes avanzados > Sindicación web (Feed RSS) >

Sindicación web (Feed RSS) | Predisposiciones artículo

 Return to chapter overview

La ventana Predisposiciones artículo, abierta con el comando Agregar... o con el comando Editar... de la ventana Sindicación web (Feed RSS), da la posibilidad de crear o modificar una noticia de la fuente RSS.

§Título: establece el título del artículo.

§Fecha de publicación: ajusta la fecha de publicación del artículo seleccionándola mediante un calendario al efecto.

§Contenido: permite elaborar el artículo mediante un editor análogo al disponible para el Objeto de Texto.

§Página conectada: permite acceder al Mapa del sitio para definir qué página debe ser enlazada a la noticia.


Gestiónde datos

Paso 4 - Ajustes avanzados >

Gestiónde datos

 Return to chapter overview
Mostrar/ocultar el texto oculto

En esta ventana se configuran los métodos de gestión de los datos recogidos a través de elementos del sitio web como los formularios de envío de correo electrónico, el Blog, el Libro de Visitas.

Por medio de los comandos de la sección Base de datos es posible crear la lista de las bases de datos vinculadas al proyecto del sitio web en el que se trabaja, para poderlas gestionar más fácilmente. Todas las bases de datos añadidas se muestran dentro de una tabla-resumen que, para cada una de ellas, muesta la Descripción, el Nombre de la base de datos, el Nombre del host y el Nombre del usuario.

Pulsar para expandir/reducir Referencia: Los comandos para conformar la lista de bases de datos

Los comandos para conformar la lista de bases de datos vinculadas al proyecto en curso son:

§Agregar...: abre la ventana Confirguración de bases de datos para proceder a la inserción de una nueva base de datos.

§Eliminar: elimina de la lista la base de datos seleccionada.

§Editar...: abre la ventana Confirguración de bases de datos para modificar los datos de la base de datos seleccionada. Es posible proceder a dicha modificación también haciendo doble clic sobre la base de datos.

Es necesario crear la lista de bases de datos vinculadas al proyecto antes de poder usar una base de datos para el envío de datos recogidos mediante un Objeto Formulario de envío e-mail.
Pulsar para expandir/reducir Referencia: Las opciones para el envío de emails y el guardado en el Servidor.

Mediante las opciones de la sección Envío de email es posible intervenir en los métodos utilizados para el envío de emails:

§Tipo de script de formulario de e-mail: configura el script que se usará para el envío de emails gestionado por WebSite X5 en relación, por ejemplo, al uso del Objeto Formulario de Envío de Emails o a la creación de un Carrito de la compra. Por defecto se usa el script completo: en el caso de que este script no funcionase debido a la configuración del Servidor que se está usando, es aconsejable probar a cambiarlo y a configurar las opciones "de baja calidad" o "script de bajo nivel" en el Servidor.

§Envío de datos de formulario de e-mail: configura el método de envío de datos que se usará para el envío de datos del Objeto Formulario de Envío de Emails. Por defecto se utiliza el método POST pero, puesto que algunos Servidores podrían no estar adecuadamente configurados para ser compatibles con él, es posible elegir el método GET.

Como es sabido, el protocolo HTTP (Hypertext transfer Protocol) es el que se utiliza como sistema principal para la transmisión de información en la Web. Este protocolo funciona en base a un mecanismo de petición/respuesta en el que el Cliente efectúa una petición y el Servidor devuelve una respuesta. Normalmente, el Cliente es el explorador de internet y el Servidor es el sitio web.

Los mensajes HTTP de petición/respuesta tienen, obviamente, una sintaxis propia. En particular, en los mensajes de petición es necesario especificar un método y, de entre los disponibles, los más comunes son GET y POST.

El método GET se usa para obtener el contenido del recurso indicado como objeto de la petición (por ejemplo la página web que se desea tener).

El método POST, en cambio, se usa normalmente para enviar información al Servidor (por ejemplo los datos de un formulario).

Por lo tanto, para el caso específico de los formularios de email es más correcto utilizar el método POST, pero dado que podría no ser compatible con el servidor, WebSite X5 permite emplear como sustitutivo el método GET.

Por último, es posible configurar la Carpeta con acceso de escritura:

§Carpeta de servidor con acceso de escritura: En este campo es necesario especificar la ruta en el Servidor de la carpeta con acceso de escritura, es decir de la carpeta dentro de la cual está habilitada la escritura por parte del código PHP.

Normalmente, los proveedores permiten el acceso de escritura para cualquier carpeta del Servidor, en ese caso no es necesario especificar ninguna ruta para la carpeta pública. En caso contrario, para conocer la ruta completa de la carpeta pública es necesario ponerse en contacto con el proveedor del espacio Web.

Mediante la sección Prueba WebSite del Panel de control online es posible verificar si la carpeta con acceso de escritura especificada y sus posibles subcarpetas existen y, si es así, si efectivamente consienten la escritura de datos.


Ventana Confirguración de bases de datos

Confirguración de bases de datos

Paso 4 - Ajustes avanzados > Gestiónde datos >

Confirguración de bases de datos

 Return to chapter overview

Esta ventana, que se abre con el botón Agregar... de la ventana Gestiónde datos, permite definir los ajustes referidos a una nueva base de datos vinculada al proyecto en curso.

La Configuración de bases de datos que es preciso definir comprende:

§Descripción: es un nombre que puede asignarse libremente a la base de datos para poder identificarla más fácilmente.

§Nombre del host: es la dirección URL del Servidor MySQL en la que reside la base de datos en línea que se desea utilizar. En la mayor parte de los casos la base de datos reside en el mismo Servidor que aloja también el sitio web al que está conectado y por ello puede ser identificada con la expresión "localhost". En cualquier caso, es conveniente verificar con nuestro proveedor si esto es así.

§Nombre de la base de datos: En este campo se debe introducir el nombre de la base de datos en la que se quiere trabajar (dato proporcionado por el proveedor).

§Nombre del usuario: en este campo se debe introducir el nombre de usuario establecido para poder acceder a la base de datos en línea (dato suministrado por el Proveedor).

§Contraseña: en este campo se debe introducir la contraseña establecida para poder acceder a la base de datos en línea (dato suministrado por el Proveedor).


Gestión de acceso

Paso 4 - Ajustes avanzados >

Gestión de acceso

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana presenta los comandos mediante los que es posible proceder a la creación y gestión de los perfiles de usuario que pueden tener acceso al Área Reservada del sitio web, es decir a las páginas que durante la fase de Creación de mapa han sido definidas como protegidas.

Pulsar para expandir/reducir Referencia: Los comandos para crear los perfiles de usuario

En el recuadro Grupos y usuarios que pueden acceder a las páginas protegidas hay una tabla-resumen en la que figuran los grupos/usuarios ya registrados, además del nombre de usuario y las notas asignadas a cada usuario.

Al lado de la tabla están los comandos para la creación de la lista de grupos y usuarios a los que se quiere permitir el acceso a las páginas protegidas del sitio web.

§Nuevo grupo: permite crear un nuevo grupo, para poder organizar los usuarios en categorías homogéneas más simples de gestionar. Los grupos no tienen una configuración especial: son simples "elementos contenedores" y por ello se añaden directamente en la tabla-resumen. Basta hacer doble clic sobre un grupo ya añadido para darle un nuevo nombre.

También con el objetivo de organizar mejor los accesos por parte de los usuarios, se puede también crear subgrupos: no hay límites establecidos para el número de grupos o subgrupos que se pueden usar.

Por defecto hay dos grupos: Administradores y Usuarios. El grupo Administradores es el conformado por los administradores del sitio web, que tienen automáticamente acceso a todas las páginas protegidas del sitio web.

Con su nombre de usuario y contraseña, todos los usuarios del grupo Administradores pueden acceder al Panel de control en línea (disponible en la URL http://www.misitio.es/admin donde http://www.misitio.es es la URL del sitio web) mediante el que se pueden gestionar los comentarios a los posts del Blog, los mensajes del Libro de Visitas y visualizar información de diagnóstico.

§Nuevo usuario: abre la ventana Configuración del usuario para añadir un nuevo usuario, con sus credenciales de acceso, en el grupo seleccionado.

§Crear un alias: permite crear un Alias para el usuario seleccionado. Esta opción es útil cuando un mismo usuario debe ser añadido a grupos distintos para tener acceso a distintas Páginas protegidas y, por este motivo, no está activada para los usuarios del grupo Administradores (que tienen ya acceso automático a todas las páginas protegidas). El Alias queda vinculado al usuario de modo que cualquier modificación aportada a uno es automáticamente aplicada también al otro. Un modo alternativo y rápido de crear un Alias es seleccionar un usuario, arrastrarlo y, antes de soltarlo dentro de un segundo grupo, pulsar la tecla CTRL.

§Eliminar: permite eliminar el grupo o el usuario seleccionado de entre los ya existentes. No es posible eliminar el grupo Administradores ni el usuario Admin en él insertado, previstos por defecto

§Editar...: abre la ventana Configuración del usuario para cambiar la configuración del usuario seleccionado.

Después de haber creado los usuarios con sus credenciales de acceso correspondientes y haberlos organizado en grupos, es posible volver al Paso 2 - Creación de mapa para establecer las páginas que deben ser protegidas y establecer qué grupos/usuarios podrán ver cada página protegida.
Pulsar para expandir/reducir Referencia: Las opciones para gestionar el acceso

Además de la tabla-resumen, en el recuadro Configuración de identidad de acceso y contraseña están incluidas las siguientes opciones:

§Mensaje de bienvenida: permite introducir el texto que se mostrará cuanto un usuario intente acceder a una página protegida sin haber efectuado antes el acceso. En ese caso, el visitante será redireccionado a una página creada automáticamente por el programa que se compone de los siguientes elementos:

-el texto de bienvenida aquí especificado,

-los campos en en los que se pide introducir nombre usuario y contraseña,

-en caso de que se especifique la Página de registro (ver la opción siguiente), el botón Registrarse.

§Página de registro: permite acceder al Mapa del Sitio para especificar qué página debe ser mostrada cuando el usuario hace clic en el botón Registrarse para solicitar el nombre usuario y la contraseña necesarios para acceder a las páginas protegidas.

Con solo configurar una página como protegida (activando, por lo tanto, un Área Reservada), se mostrará automáticamente en el Mapa la página especial "Página de Acceso": es posible seleccionarla y abrir la ventana Propiedades de la página para definir sus propiedades principales.

Cuando se prueba localmente el funcionamiento de la página web creada, una ventana de aviso advierte que las páginas protegidas son visualizadas sin el requerimiento de acceso. El Área Reservada se activa solo tras publicar la página web en el Server.

Para el correcto funcionamiento del Área Reservada es necesario que el Servidor en el que será publicado el sitio sea compatible con el lenguaje de programación PHP y las sesiones. Mediante la sección Prueba WebSite del Panel de Control en línea es posible obtener esta información de diagnóstico acerca del Servidor.

Profundización:

-

El Panel de Control en línea


Ventana Configuración del usuario

Configuración del usuario

Paso 4 - Ajustes avanzados > Gestión de acceso >

Configuración del usuario

 Return to chapter overview

La ventana Configuración del usuario, abierta con el comando Nuevo usuario o con el comando Editar... de la ventana Gestión de acceso, permite definir las credenciales de acceso para un nuevo Usuario.

Los comandos disponibles para crear un nuevo Usuario son:

§Nombre y apellido: especifica el nombre del usuario para el que se quieren habilitar las credenciales para permitirle el acceso a determinadas páginas protegidas del sitio web.

§Nombre del usuario / Contraseña: permiten especificar el Nombre de Usuario y la contraseña que el usuario deberá utilizar para poder ver las páginas protegidas a cuyo acceso se le habilita. Una contraseña compuesta por 8 caracteres (letras y números) elegidos aleatoriamente aparece propuesta, pero puede cambiarse libremente.

§Página de entrada: permite acceder al Mapa del Sitio para especificar qué página debe ser mostrada después de que el usuario ha introducido sus credenciales de acceso.

§Nota: permite introducir información voluntaria sobre el usuario.

§Fecha de registro: permite introducir, mediante la ventana de calendario incluida, la fecha en la que se ha producido el registro del Usuario.

La información referida a las opciones Nota y Fecha de registro no es incluida en el código del sitio web realizado: sirve únicamente para permitir una mejor gestión de los Usuarios por parte del Administrador del sitio web.


Carrito de la compra

Paso 4 - Ajustes avanzados >

Carrito de la compra

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana propone las herramientas y las opciones necesarias para crear y gestionar un carrito de la compra de comercio electrónico mediante el cual efectuar la venta en línea de los productos ofrecidos en el sitio web.

Para crear un carrito de la compra de comercio electrónico es necesario, en primer lugar, definir el catálogo de productos disponibles, organizándolos en categorías y sub-categorías homogéneas. Naturalmente, para cada producto es preciso definir una una serie de datos indispensables como el nombre, la descripción y el precio, pero también es posible ir más allá, asociando una o más imágenes y ofreciendo variantes (de talla, de color, de modelo, etc.). Una vez creado el catálogo, es preciso definir los métodos de envío y de pago que se desea activar y configurar el formulario de pedido, configurando también los correos electrónicos que son enviados desde el carrito, tanto al gestor del sitio como a los clientes que hacen el pedido.

Más concretamente, las distintas opciones para definir los elementos y el funcionamiento del carrito de la compra se presentan en las siguientes secciones: Productos, Gestión del pedido, Detalles del cliente, Envío del Pedido y Opciones.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Productos

Mediante los comandos de esta sección se procede al añadido de productos al carrito, organizándolos en categorías.

Todos los productos ya añadidos se muestran en la tabla-resumen que indica más concretamente, para las categorías existentes, todos los productos añadidos con su Descripción y Precio.

La tabla-resumen presenta una barra de herramientas superior con los siguientes comandos:

Cortar [CTRL+X] - Copiar [CTRL+C] - Pegar [CTRL+V]

Cortan, copian y pegan los productos seleccionados. Estos comandos están presentes también en el menú contextual que se abre haciendo clic con el botón derecho del ratón sobre la lista de productos.

Expandir / Reducir

Extienden y reducen la categoría seleccionada para mostrar u ocultar los productos que contiene.

Importar productos

Esta opción le permite importar un listado de productos para ser directamente agregados al carrito desde un archivo externo (en formato .TXT o .CSV de Microsoft Excel).

Exportar productos

Exporta el catálogo de productos a un archivo .TXT o .CSV.

Para mayor información sobre las funciones Importar productos/Exportar productos y sobre cómo crear y gestionar los archivos con el catálogo de productos, ver: Cómo importar/exportar los productos del carrito.

Además de la barra de herramientas, para definir la lista ordenada de los productos que se quiere gestionar mediante el carrito de la compra, están disponibles los siguientes comandos:

§Nueva categoría: permite insertar una nueva categoría en la que organizar los productos disponibles. Las categorías no tienen una configuración especial: son simples "elementos contenedores" y por ello se añaden directamente en la tabla-resumen. Basta hacer doble clic sobre una Categoría ya añadida para poderla renombrar.

También con el objetivo de organizar mejor el catálogo de productos, se puede también crear subcategorías: no hay límites establecidos para el número de categorías o subcategorías que se pueden usar.

§Nuevo producto: abre la ventana Configuración del producto para añadir un nuevo producto en la categoría seleccionada.

§Eliminar: permite eliminar la categoría seleccionada, con todos los productos añadidos, o los productos seleccionados individualmente.

§Editar...: abre la ventana Configuración del producto para cambiar la configuración del producto seleccionado.

Para mover un producto de una categoría a otra es posible servirse directamente de la lista de productos: basta seleccionarlo, arrastrarlo y dejarlo en su nueva ubicación (Drag&Drop). Es posible seleccionar varios productos utilizando las teclas CTRL y SHIFT.

Solo tras haber añadido las categorías referidas a los productos dentro del carrito de la compra será posible utilizar el Objeto de Lista de Productos para crear un auténtico catálogo en línea.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Gestión del pedido

Mediante los comandos de esta sección es posible definir los métodos de envío y de pago que se desea poner a disposición para el carrito.

En el recuadro Lista de tipo de envío se presenta la lista de todos los métodos de envío introducidos, indicando para cada uno de ellos el Nombre, la Descripción y el Coste asignados.

Los comandos disponibles para crear el listado de los métodos de envío activos para el carrito de la compra son:

§Agregar...: abre la ventana Tipo de envío para proceder a la definición de un nuevo método de envío.

§Duplicar: permite crear una copia del método de envío seleccionado para poder proceder más rápidamente en la definición de otro método que se desea poner a disposición.

§Eliminar: permite eliminar el método de envío seleccionado.

§Subir / Bajar: modifican el orden en el que se muestran los métodos de envío ya añadidos, desplazando hacia arriba o hacia abajo el método seleccionado.

§Editar...: abre la ventana Tipo de envío para modificar el método de envío seleccionado. Es posible proceder a dicha modificación también haciendo doble clic sobre el método

Del mismo modo, en el recuadro Lista de tipo de pago se presenta la lista de todos los métodos de pago disponibles en el carrito y para cada uno de ellos se indica el Nombre, la Descripción y el Coste asignados.

Los comandos disponibles para crear la lista de métodos de pago son los ya explicados para los métodos de envío, pero los botones Agregar... y Editar... abren la ventana Tipo de pago.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Detalles del cliente

Mediante los comandos de esta sección se conforma el formulario que el cliente deberá rellenar para efectuar un pedido usando el carrito de la compra.

En el recuadro Formulario de pedido se presenta una Lista de campos con la lista de campos que pueden ser utilizados para conformar el formulario de pedido: hay tanto campos Valores preestablecidos como campos Personalizada y para cada campo se especifica si se ha configurado como Visible y/u Obligatorio.

Los comandos de la botonera que hay encima de la Lista de campos permiten:

Agregar un nuevo campo personalizado

Añade al formulario un nuevo campo, insertándolo entre los Personalizada.

Quitar campo

Elimina del formulario el campo seleccionado. No es posible eliminar los campos Valores preestablecidos.

Cambiar nombre del campo

Cambia el nombre del campo seleccionado. No es posible cambiar el nombre de los campos Valores preestablecidos.

Subir / Bajar

Modifican el orden en el que se muestran los campos ya añadidos, desplazando hacia arriba o hacia abajo el campo seleccionado. Es posible modificar el orden tanto de los campos Valores preestablecidos como de los campos Personalizada pero no es posible incluir los campos Personalizada entre los campos Valores preestablecidos o viceversa.

Campo visible

Configura el campo seleccionado como visible o no visible dentro del formulario.

Campo obligatorio

Configura el campo seleccionado como obligatorio o no obligatorio dentro del formulario. Se requiere que el cliente rellene todos los campos obligatorios para poder continuar con el pedido.

La lista propuesta por defecto contiene ya todos los campos generalmente utilizados en un módulo de inscripción.

A diferencia de los demás, el campo "dirección de correo electrónico" no se puede ocultar ni hacer "no obligatorio" ya que, para que el carrito funcione correctamente, es necesario conocer la dirección de email del cliente que envía el pedido.

Al fondo de la tabla referida a la Lista de campos está disponible la opción:

§Mostrar formulario de información de envío: añade automáticamente al formulario una sección con los campos necesarios para indicar los datos para el envío en caso de que estos sean diferentes de los datos de facturación.

Además de los campos necesarios para indicar los datos de facturación y el envío de los productos, por ley los formularios de pedido deben presentar también las condiciones de compra que regulan el funcionamiento del carrito de la compra para dar la posibilidad a los clientes de revisarlas y aceptarlas explícitamente.

En la sección Condiciones de Compra hay disponible un editor de texto mediante el que es posible elaborar el Texto de las Condiciones de Compra. En el editor hay ya sugerida una frase estándar en la que se pueden insertar los enlaces (mediante el botón [image]) para abrir, por ejemplo, los archivos .PDF que explican las políticas de tratamiento de datos y las políticas de reembolso. De todos modos es posible escribir un texto diferente, expresando la cuestión del modo que se crea más conveniente.

También de acuerdo con la normativa vigente, basta que las Condiciones de Compra sean presentadas justo antes del botón "Comprar" con el que se envía el pedido. También se puede activar la opción:

§Requerir la aceptación de las Condiciones de Compra: añade al final del formulario, justo antes del botón "Comprar", la petición de aceptar explícitamente las Condiciones de Compra indicadas, pulsando para que aparezca la marca de verificación en una casilla al efecto.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Envío del Pedido

Mediante los comandos de esta sección se definen las modalidades de envío de los datos recogidos en el formulario de pedido del carrito de la compra, además de los textos del email de confirmación de pedido que se envía automáticamente al cliente.

En la sección Envío del pedido se puede especificar cómo se guardarán los datos recogidos en el formulario de pedido y cómo serán enviados al gestor del sitio web.

§Dirección de e-mail para recibir los pedidos: especifica la dirección de correo electrónico a la que será enviada la información recogida a través del formulario creado. Es posible especificar más de una dirección de correo electrónico: para ello hay que introducir las direcciones separadas por un punto y coma (;).

§Adjuntar los datos del pedido en formato CSV: hace que los datos recogidos sean guardados también e un archivo en formato CSV, incluido al final del email enviado. En un archivo CSV los datos se registran en forma de texto, como una larga lista de elementos separados por un punto y coma (;). Estos archivos se pueden importar fácilmente en los programas de gestión de hojas de cálculo (por ejemplo, Microsoft Excel).

Por último, en el recuadro E-mail de confirmación del pedido del usuario están los campos por medio de los que es posible especificar el Texto de encabezado y el Texto de pie de página para el email de confirmación de pedido que se enviará automáticamente al cliente. En este email de confirmación de pedido, además del texto introductorio y el texto de cierre, se presentan también las descripciones de los métodos de envío y de pago elegidos.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Opciones

Operando con los comandos de esta sección es posible definir algunos parámetros gráficos, además de los relativos a moneda e IVA, para el carrito de la compra de comercio electrónico.

En el recuadro Configuración moneda se presentan las siguientes opciones:

§Moneda: establece la moneda que se usará en el carrito de la compra. El menú desplegable sugiere algunas divisas: para modificar la composición de esta lista de divisas basta pulsar el botón [image] para abrir la ventana Lista de monedas.

§Agrupación de dígitos: permite elegir cómo se deben escribir los precios de los productos, eligiendo si los millares deben ser separados por un punto y los decimales por una coma (1.000,00) o viceversa (1,000.00).

§Mostrar moneda a la derecha: activando esta opción, el símbolo de la moneda será colocado al lado derecho de los precios.

§Mostrar posiciones decimales: activando esta opción, los precios son presentado con dos cifras después de la coma.

En el recuadro Configuración IVA están disponibles las siguientes opciones:

Tipo: establece si para todos los precios de los productos presentes en el carrito de la compra el IVA está incluido o no, o si están exentos de IVA.

Valor predeterminado (%): especifica el valor del IVA que se aplica por defecto para todos los productos del carrito de la compra, exceptuando aquellos para los que se ha definido un IVA particular con la opción IVA (%) de la ventana Configuración del producto | General.

En el recuadro Opciones se ofrecen los siguientes comandos:

§Permitir únicamente pedidos de cantidades mínimas: permite hacer que el pedido no sea aceptado a no ser que alcance un importe mínimo establecido.

§Cantidad total mínima: está disponible solo si se activa la opción Permitir únicamente pedidos de cantidades mínimas, define el valor del importe mínimo del total del pedido que se debe alcanzar para que el pedido sea aceptado. Por medio de los comandos del recuadro Opciones es posible definir el aspecto de las tablas que resumen los productos disponibles y/o añadidos al carrito de la compra:

§Fondo del encabezado / Texto de encabezado / Fondo celdas / Texto celdas / Borde de la tabla: establecen el color para los diversos elementos de la tabla de productos.

§Tabla de esquinas redondeadas: define el factor de redondeo para las esquinas de la tabla de productos, también individualmente.

§Alternar colores de las filas: distingue las filas pares y las impares en la tabla de productos aplicando dos colores de fondo diferentes, el color definido en Fondo celdas es un color obtenido haciendo más oscuro el primero. Alternar los colores de las filas sirve para aumentar la legibilidad de la tabla, sobre todo cuando esta es larga.

Por medio de los comandos del recuadro Imágenes es posible configurar algunas imágenes utilizadas en las páginas del carrito de la compra:

§Agregar al carrito/ Eliminar del carrito: permiten especificar las imágenes que se utilizarán para crear los botones 'Agregar al carrito' y 'Eliminar del carro', es decir los botones que el usuario puede utilizar para añadir o eliminar del carrito de la compra un determinato producto.

§Vista previa no disponible: especifica la imagen que se utilizará cuando para un producto no se ha especificado una imagen asociada (en Configuración del producto | Imagen) y en Objeto de Lista de Productos | Ajustes ha sido elegida como Modo de visualización la presentación "Imagen y texto" o "Texto y imagen" para las imágenes.

Una vez creado el carrito de la compra de comercio electrónico es preciso incluir en el sitio la información y los enlaces necesarios para que los usuarios puedan visualizar la información sobre los Productos y efectuar la compra. Para hacer esto es posible proceder de diferentes maneras:

1.Crear páginas específicas en las que se presenten los productos del modo que se crea más oportuno (con imágenes, textos, tablas, etc.) e insertar en ellas el botón "Comprar". En este caso, el botón "Comprar" puede ser creado mediante el enlace Agregar al carrito (ver Enlace).

2.Crear páginas en las que se presenten los productos mediante fichas especiales que tienen ya el botón "Comprar". En este caso es necesario utilizar el Objeto de Lista de Productos.

Al crear un carrito de la compra, se muestra automáticamente en el Mapa la página especial "Carrito de la compra": es posible seleccionarla y abrir la ventana Propiedades de la página para definir sus propiedades principales.

Cuando se prueba el funcionamiento del la página web localmente, una ventana de aviso advierte que el pedido no se enviará y se efectúa el redireccionamiento automático a la página de confirmación del pedido. El carrito de la compra funciona plenamente solo tras la publicación de la página web en el Server.

Para el correcto funcionamiento del carrito de de la compra, es necesario que el Servidor en el que será publicado el Sitio sea compatible con el lenguaje PHP y que esté activo el comando MAIL. Mediante la sección Prueba WebSite del Panel de control en línea es posible obtener esta información de diagnóstico acerca del Servidor.

Si se verifican problemas en el envío de los correos, es probable que el Servidor utilizado no esté configurado de modo estándar. En estos casos se aconseja intentar modificar los ajustes referidos al script y al método utilizados para el envío de emails mediante las opciones disponibles en Ajustes avanzados | Gestiónde datos. Para más información al respecto, póngase en contacto con el proveedor de espacio Web.

Best practice:

- | Cómo importar/exportar los productos del carrito
- | Cómo definir los contenidos del correo electrónico de confirmación de pedido

Profundización:

-

El Panel de Control en línea


Ventana Configuración del producto

Carrito de la compra | Ventana Configuración del producto

Paso 4 - Ajustes avanzados > Carrito de la compra >

Carrito de la compra | Ventana Configuración del producto

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Configuración del producto, abierta con el comando Nuevo producto o con el comando Editar... que hay en Carrito de la compra | Productos, permite definir y añadir un nuevo producto.

La ventana está dividida en las siguientes secciones: General, Imagen, Opciones, Descuento.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se puede añadir información básica sobre un nuevo producto que añadir al Carrito de la compra.

Las opciones disponibles para definir el nuevo producto que añadir a la lista son:

§Nombre/Código: asigna un nombre o un código identificador al producto actual.

§Descripción: asocia una descripción al producto actual.

§Precio: especifica el precio del producto actual.

§IVA (%): si está activa, permite especificar el IVA que se aplicará para el producto actual. Esta opción solo está disponible si en Carrito de la compra | Opciones ha sido elegida el Tipo "IVA incluido en el precio" o "IVA no incluido en el precio" para la Configuración IVA.

En función de cómo se desee configurar el Carrito, es posible introducir para los productos los precios ya con IVA incluido, o bien, sobre todo en el caso de artículos que requieran la aplicación de un IVA distinto, es posible introducir los precios sin IVA y especificar después, aparte, qué impuesto aplicar caso por caso.

§Peso: especifica el peso del producto actual con el fin de poder calcular los gastos de envío que se aplicarán (ver ventana Tipo de envío).

En función del tipo de productos tratados en el carrito de la compra, es posible usar la opción Peso para especificar un peso en kilogramos o en gramos, en lugar de introducir un volumen expresado en litros o en metros cúbicos, o en cualquier otra unidad de medida útil. Así pues, para que los costes de envío sean calculados correctamente es importante elegir una unidad de medida y mantenerla inalterada para todos los productos del carrito.

§Enlace (ej.: Página de la ficha del producto): especifica mediante la ventana Enlace que se abre el enlace que se asocia al producto actual. Se puede usar, por ejemplo, para enlazar la página del sitio web en la que se presenta el producto más extensamente.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Imagen

Por medio de los comandos de esta sección se asocian al producto propuesto en el Carrito de la compra una o más imágenes con las que presentarlo.

Importando más imágenes es posible crear una auténtica presentación de imágenes: pulsando en cada una de ellas será también posible verlas en tamaño grande en una ventana de ShowBox al efecto.

Es necesario precisar que sólo la primera de las imágenes asociadas al Producto será visualizada en el Carrito. Todas las demás imágenes que se hayan añadido se mostrarán en las fichas creadas si se utiliza el Objeto de Lista de Productos.

Las opciones disponibles para crear la lista de imágenes que se quieren asociar al producto son:

§Agregar... / Eliminar: permiten, respectivamente, agregar nuevas imágenes o eliminar las imágenes seleccionadas de la lista de aquellas que componen la presentación. La ventana Seleccionar Archivo abierta permite seleccionar incluso varios archivos al mismo tiempo.

§Subir / Bajar: modifican el orden en el que se muestran las imágenes ya añadidas, desplazando hacia arriba o hacia abajo la imagen seleccionada.

§Editar...: abre el Editor de imágenes para editar la imagen seleccionada.

Además, en el recuadro Propiedades de ShowBox están disponibles las siguientes opciones:

§Tamaño máximo: permiten definir los valores máximos que puede asumir la ventana ShowBox en la que aparecen las imágenes ampliadas. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

§Efecto: especifica mediante la ventana Propiedades de los efectos que se abre pulsando el botón [image], el efecto de transición que se aplicará a las imágenes mostradas en la ventana ShowBox.

La apariencia de la ventana de ShowBox se puede personalizar completamente: a través de las opciones que hay en la sección Estilos y Modelos | E-mail del Paso 4 - Ajustes avanzados se pueden ajustar, por ejemplo, los colores, la sombra, la opacidad y efectos de apertura.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Opciones

Por medio de los comandos de esta sección se crea la lista de variantes disponibles para el nuevo producto que se quiere ofrecer mediante el Carrito de la compra.

Como variantes principales de un producto se pueden introducir, por ejemplo, las tallas o los colores disponibles para una pieza de ropa, más bien que los modelos alternativos de un artículo.

El cliente final podrá ver las variantes disponibles en una lista al efecto mostrada dentro del carrito de la compra y/o en la ficha de presentación del producto creada con el Objeto de Lista de Productos y seleccionar aquella en la que está interesado y hacer el pedido de compra.

Los comandos disponibles para configurar la Lista de opciones principales son:

§Agregar...: añade una nueva variante principal para el producto actual. La variante añadida se mostrará en la Lista de opciones principales y puede ser configurada mediante las opciones recogidas en la sección Configuración de la opción principal.

§Eliminar: elimina la variante principal seleccionada de la Lista de opciones principales.

§Subir / Bajar: modifican el orden en el que se muestran las variantes de producto ya añadidas, desplazando hacia arriba o hacia abajo la variante seleccionada.

Es posible definir cada variante principal mediante la Configuración de la opción principal:

§Nombre/Código: asigna un nombre o un código de identificación a la variante principal que se está creando para el producto actual.

§Diferencia de precio: especifica la diferencia de precio de la variante principal, en positivo o en negativo, respecto al Precio del producto definido en la sección General.

§Diferencia de peso: especifica la diferencia de peso de la variante principal, en positivo o en negativo, respecto al Peso del producto definido en la sección General.

Pulsar para expandir/reducir Referencia: Los comandos de la sección Descuento

Por medio de los comandos de esta sección, si así se desea, se puede establecer un descuento para el nuevo producto que se ofrecerá en el Carrito de la compra. Marcando la opción Activar descuento por cantidad es posible crear una lista con los descuentos que se aplicarán en función de la cantidad de unidades de producto solicitada. Todos los descuentos por cantidad introducidos son visualizados en una lista especial y los comandos disponibles para crearlos son:

§Agregar...: abre la ventana Descuento por cantidad para añadir y configurar un descuento por cantidad para el producto actual. Prácticamente, permite definir la Cantidad de unidades de producto que debe ser alcanzada o superada en el pedido para que se pueda aplicar el Descuento (%) establecido.

§Eliminar: elimina de la lista el descuento por cantidad seleccionado.

§Editar...: abre la ventana Descuento por cantidad para poder modificar el descuento por cantidad seleccionado. Es posible proceder a dicha modificación también haciendo doble clic sobre el descuento.


Ventana Tipo de envío

Carrito de la compra | Ventana Tipo de envío

Paso 4 - Ajustes avanzados > Carrito de la compra >

Carrito de la compra | Ventana Tipo de envío

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Tipo de envío, abierta con el comando Agregar... o con el comando Editar... presentes en el recuadro Lista de tipo de envío en Carrito de la compra | Gestión del pedido, permite definir los métodos de envío que se quieren activar para el Carrito de la compra de productos.

La ventana Tipo de envío está dividida en las siguientes secciones: General, Coste y Mensaje de e-mail.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se puede definir un nuevo método de envío:

§Nombre: asocia un nombre al método para identificarlo por medio de una expresión clara y sintética.

§Descripción: permite introducir una explicación completa del método.

§Imagen: selecciona la imagen que se asociará a la descripción del método activo en las páginas del carrito de la compra.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Coste

Por medio de los comandos de esta sección se puede especificar el total de los gastos adicionales que se aplicarán en caso de que el cliente elija el método de envío seleccionado. Dicho total puede ser configurado según una de las siguientes modalidades:

§Coste fijo: permite especificar un único coste fijo para este método de envío. Dicho coste permanecerá sin cambios, independientemente de cualquier modificación en los parámetros relativos al pedido.

§Coste relativo a la cantidad pedida: permite crear una o más franjas de coste para el método de envío, en base al total del pedido alcanzado. En la práctica, los botones Agregar... y Editar... abren la ventana Gastos de envío mediante la cual es posible definir el Importe pedido que debe ser alcanzado o superado para que se pueda aplicar el Precio de envío especificado:

§Coste relativo al peso total: permite crear una o más franjas de coste para el método de envío, en base al total del peso alcanzado por los productos de que consta el pedido. También en este caso, los botones Agregar... y Editar... abren la ventana Gastos de envío mediante la cual es posible definir el Peso total que debe ser alcanzado o superado para que se pueda aplicar el Costes de envío especificado:

Si se quiere configurar franjas de coste en función del total del peso, para que los costes de envío sean calculados correctamente es importante especificar el peso de cada producto presente en el carrito de la compra mediante la opción al efecto que se encuentra en la ventana Configuración del producto | General.

Además, está disponible también la opción:

§IVA (%): si está activada, permite especificar el IVA que se aplica al coste asociado al método de envío. Esta opción solo está disponible si en Carrito de la compra | Opciones ha sido elegida el Tipo "IVA incluido en el precio" o "IVA no incluido en el precio" para la Configuración IVA.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Mensaje de e-mail

Mediante el campo presente en esta sección se puede introducir un texto que describe y explica el método de envío seleccionado. Se recomienda escribir con atención este mensaje, ya que será utilizado dentro del correo electrónico de confirmación del pedido que será enviado al cliente.

Best practice:

-

Cómo definir los contenidos del correo electrónico de confirmación de pedido


Ventana Tipo de pago

Carrito de la compra | Ventana Tipo de pago

Paso 4 - Ajustes avanzados > Carrito de la compra >

Carrito de la compra | Ventana Tipo de pago

 Return to chapter overview
Mostrar/ocultar el texto oculto

La ventana Tipo de pago, abierta con el comando Agregar... o con el comando Editar... presentes en el recuadro Lista de tipo de pago en Carrito de la compra | Gestión del pedido, permite definir e introducir los métodos de pago que se quieren activar en el Carrito de la compra de productos.

La ventana Tipo de pago está dividida en las siguientes secciones: General, Tipo y Mensaje de e-mail.

Pulsar para expandir/reducir Referencia: Los comandos de la sección General

Por medio de los comandos de esta sección se puede definir un nuevo método de pago:

§Nombre: asocia un nombre al método para identificarlo por medio de una expresión clara y sintética.

§Descripción: permite introducir una explicación completa del método.

§Imagen: selecciona la imagen que se asociará a la descripción del método activo en las páginas del carrito de la compra.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Tipo

Por medio de los comandos de esta sección se especifica el tipo de pago requerido eligiendo entre:

§Pago posterior: el cliente podrá completar el pedido y efectuar el pago en un segundo momento. Está indicado, por ejemplo, para el caso de pagos mediante transferencia bancaria.

§Pago inmediato: el cliente podrá completar el pedido pero se le pedirá que efectúe inmediatamente el pago. Está indicado para el caso de pagos mediante PayPal™ u otros circuitos similares, o bien mediante tarjeta de crédito.

Activando la opción Pago inmediato es preciso definir el Tipo de pago requerido, después en función del tipo elegido es necesario configurar algunos parámetros:

PayPal/Tarjeta de crédito

§Cuenta PayPal: campo para introducir la cuenta asignada como usuario registrado de PayPal™.

§Página de confirmación de pago: permite abrir el Mapa del Sitio para seleccionar la página que debe ser visualizada después de que el pago ha sido completado.

§Página de error de pago: permite abrir el Mapa del Sitio para seleccionar la página que debe ser mostrada en caso de error durante el procedimiento de pago.

Código personalizado

§Código HTML para el botón 'Pagar ahora': si se decide utilizar un sistema de pago alternativo a PayPal™, es preciso introducir en este campo el código HTML suministrado tras la inscripción por el administrador del servicio de transacción elegido.

El código HTML suministrado por el administrador del servicio de transacción sirve para para crear el botón "Pagar Ahora" y debe ser completado con la indicación de qué se compra y el precio correspondiente. Así pues, para que el carrito de la compra funcione es necesario introducir manualmente en el código los siguientes tags:

§[ORDER_NO] - permite recoger el número de pedido;

§[PRICE] - permite recoger el precio.

Además, están disponibles también las opciones:

§Costes: permite especificar el total de los gastos adicionales que se aplicarán en caso de que el cliente elija el método de pago seleccionado.

§IVA (%): si está activada, permite especificar el IVA que se aplica al coste asociado al método de pago. Esta opción solo está disponible si en Carrito de la compra | Opciones ha sido elegida el Tipo "IVA incluido en el precio" o "IVA no incluido en el precio" para la Configuración IVA.
Pulsar para expandir/reducir Referencia: Los comandos de la sección Mensaje de e-mail

Mediante el campo presente en esta sección se puede introducir un texto que describe y explica el método de pago vigente. Se recomienda escribir con atención este mensaje, ya que será utilizado dentro del correo electrónico de confirmación del pedido que será enviado al cliente.

Best practice:

-

Cómo definir los contenidos del correo electrónico de confirmación de pedido


Exportación del sitio

Paso 5 - Exportación del sitio >

Exportación del sitio

 Return to chapter overview

Llegados al final de una sesión de trabajo o de la creación del sitio web entero, en el Paso 5 WebSite X5 permite elegir la modalidad de exportación para el proyecto en curso. Ante todo, gracias al motor FTP incluido, es posible proceder directamente a la publicación de los archivos en el Servidor: la conexión segura también es soportada y es posible ahorrar tiempo trabajando en multi-conexión, y en caso de actualizaciones, publicando solo los archivos modificados. Como alternativa, es posible exportar el sitio web a un disco del equipo para poder disponer en local de una copia de los archivos que serán publicados en el Servidor. Finalmente, todos los archivos del proyecto pueden ser agrupados dentro de una única carpeta para poder transferirlos fácilmente a otro ordenador para proseguir el trabajo.

Concretamente las opciones de exportación disponibles son:

Exportar el sitio a Internet

Exportar el sitio a un disco

Exportar el Proyecto


Exportación del sitio a Internet

Paso 5 - Exportación del sitio >

Exportación del sitio a Internet

 Return to chapter overview
Mostrar/ocultar el texto oculto

Esta ventana permite publicar en la red el sitio web creado.

WebSite X5 pone a disposición del usuario un Motor FTP interno para poder proceder directamente a la publicación en línea de los sitios realizados. Todos los archivos necesarios para que un Sitio pueda ser visualizado correctamente en Internet son guardados en el ordenador en el que se ha efectuado el trabajo. Así pues, para que los usuarios que se conectan a Internet puedan ver nuestras páginas, es necesario copiar estos archivos en un Servidor, o sea en un ordenador permanentemente conectado a la red.

Pulsar para expandir/reducir Referencia: Los comandos para configurar la conexión al Servidor

Para proceder a la exportación de todos los archivos del sitio web es necesario, en primer lugar, definir los siguientes Parámetros de conexión (datos proporcionados por el proveedor que gestiona el servicio en el que el usuario se apoya para tener el espacio web):

§Tipo de servidor: especifica qué tipo de conexión utilizar para proceder a la publicación de archivos del sitio web en el Servidor. En relación a lo que es admitido por el propio Servidor, es posible elegir entre

-FTP - File Transfer Protocol: previsto por defecto, es uno de los primeros protocolos para la transmisión de datos que fue introducido y tiene un amplia difusión. La especificación original de FTP no prevé ningún cifrado para los datos intercambiados entre cliente y Servidor.

-SFTP - SSH File Transfer Protocol: es un protocolo de red que prevé la transferencia segura de los datos, gracias al establecimiento de sesiones remotas cifradas, así como funcionalidades de manipulación en los archivo remotos.

-FTPS - FTP over explicit TLS/SSL: para resolver los problemas de seguridad, añade al protocolo FTP original un layer de cifrado SSL/TLS además de una serie de comandos y códigos de respuesta.

§Dirección FTP: en este campo se debe introducir la propia dirección FTP. Un ejemplo de dirección FTP es "ftp.websitex5.com", donde "websitex5.com" es el nombre del dominio.

§Nombre del usuario / Contraseña: en estos campos es necesario introducir los propios nombre de usuario y contraseña.

§Guardar contraseña: activando esta opción, la contraseña especificada se memoriza para no tener que introducirla nuevamente más tarde.

Además, es posible definir algunos Parámetros opcionales, no indispensables para establecer la conexión con el Servidor, como:

§Carpeta de destino: en este campo se puede especificar la carpeta de destino asignada al proveedor para el espacio web. Si no se introduce una ruta de acceso, será posible igualmente configurarla en la página de pantalla de WebSite X5 siguiente.

§Puerto: especifica el puerto del Servidor en el que se establece la conexión (dato proporcionado por el proveedor de espacio web). En la mayor parte de los casos no es necesario modificar el valor que aparece por defecto.

§Conexiones simultáneas: especifica el número de conexiones al Servidor que el motor FTP del programa debe abrir simultáneamente para proceder a la publicación de los archivos del sitio web. El número de conexiones equivale al número máximo de archivos que pueden ser exportados contemporáneamente.

Las Conexiones simultáneas son una funcionalidad con la que el Servidor debe ser compatible. Si es compatible, más allá de un cierto límite, aumentar el número de conexiones simultáneas no comporta una ventaja efectiva en términos de tiempo. Se aconseja empezar con 3 y probar a modificar dicho parámetro, aumentándolo progresivamente, para poder identificar el mejor número de conexiones en relación al ancho de banda manejado por el Servidor utilizado. No se recomienda superar las 10 conexiones simultáneas.

§Usar protocolo FTP pasivo: activa por defecto, esta opción contempla el uso de FTP pasivo como modalidad de publicación. Esta modalidad se recomienda para obtener una mayor compatibilidad de conexión con el Servidor.

§Activar compresión gzip: activa por defecto, contempla que los archivos del sitio web se compriman durante la exportación. Así, es posible llevar a cabo la publicación en menos tiempo.

No todos los servidores admiten la compresión en gzip: en el caso de que la opción esté activada y el Servidor utilizado no la admita, los archivos no serán comprimidos y la publicación será llevada a cabo igualmente. La compresión gzip funciona muy bien con archivos de gran tamaño (por ejemplo, los que contienen muchas imágenes o vídeos), mientras que no se aconseja su uso en el caso de archivos de pequeño tamaño.

Una vez definidos los parámetros necesarios para efectuar la conexión al Servidor, es posible especificar el Tipo de carga, es decir lo que se quiere en efecto publicar:

§Exportar todos los archivos del sitio Internet: en este caso se publica el sitio web entero. Se recomienda esta modalidad cuando se procede por primera vez a la publicación de un proyecto o cuando se han hecho numerosas y sustanciales modificaciones al sitio web.

§Exportar solamente los archivos modificados desde la última exportación con fecha {0}: en este caso se publican sólo los archivos que han sido modificados respecto a lo que se publicó con la exportación producida en la fecha en memoria. Se recomienda esta modalidad para aquellos sitios que son constantemente actualizados, ofreciendo la ventaja de ahorrar tiempo respecto a la publicación completa del sitio web.

La fecha de publicación se guarda en el archivo de proyecto: por esto es importante, después de haber publicado los archivos, guardar siempre los cambios.

Aunque solamente se requiere la exportación de los archivos modificados, normalmente las páginas HTML y lor archivos de recursos (los que están el la subcarpeta Res) son publicados nuevamente: de hecho es muy probable que hayan sido actualizados.

§Exportar solamente Blog y RSS: en este caso se publican solo los archivos .PHP y .XML del blog y los archivos .XML de la fuente RSS administrados en las secciones correspondientes del Paso 4 - Ajustes avanzados. Esta modalidad, activa solo si el blog y/o la fuente RSS ya han sido publicados una primera vez, se recomienda cuando no se han aportado actualizaciones al sitio web sino solo se han añadido nuevos posts al blog o nuevas noticias en la fuente RSS.
Pulsar para expandir/reducir Referencia: Los comandos para efectuar la publicación en línea

Después de haber configurado los parámetros necesarios, basta pulsar el botón Siguiente para iniciar la conexión con el Servidor. Una vez establecida la conexión con el servidor, una ventana mostrará todas las carpetas existentes en el mismo. A continuación, utilizando los comandos disponibles, es necesario situarse dentro de la carpeta en la que se desean publicar los archivos del sitio web.

La carpeta dentro de la que se publicará el sitio debería contener un archivo index.html. En cualquier caso, si no se está seguro de la carpeta en la que publicar, es preciso contactar con el proveedor y pedirle información al respecto: no todas las carpetas de un servidor son apropiadas para la publicación.

Pulsar para expandir/reducir

Los comandos disponibles para operar con las carpetas y los archivos que hay en el Servidor son:

Volver a la carpeta superior

Permite acceder a la carpeta superior.

Actualizar

Actualiza el contenido de la carpeta.

Nueva carpeta

Crea una nueva carpeta.

Eliminar

Elimina el archivo o carpeta seleccionado.

Cambiar nombre

Permite modificar el nombre del archivo o de la carpeta seleccionada.

Cargar el archivo al servidor / Descargar el archivo seleccionado desde el servidor

Permiten, respectivamente, publicar en el Servidor uno o más archivos que no forman parte del proyecto y descargar en el equipo local archivos ya publicados en el Servidor.

Mostrar lista / Mostrar detalles

Permiten configurar cómo se debe mostrar la lista de archivos.

Por último, hay disponible una sección en la que es posible elegir si visualizar:

§Registro: se presentan todos los mensajes (esto es, los "log") y los posibles errores producidos durante la comunicación con el Servidor.

§Archivos en cola: muestra los archivos (el número máximo de dichos archivos depende de las conexiones simultáneas establecidas) de los que se está efectuando la publicación. Para cada archivo, se muestra el estado de avance de la publicación mediante una barra de progreso. Una vez terminada la publicación, el archivo es eliminado de la cola de transferencias.

Durante la exportación, WebSite X5 copia en el Servidor todos los archivos contenidos en la carpeta de registro. Si en esta carpeta ya hay archivos con el mismo nombre de los que son publicados, estos serán sobreescritos. WebSite X5 no borra nunca automáticamente ningún archivo ya presente en el Servidor: para eliminar archivos que ya no son necesarios es preciso hacerlo manualmente.


Exportación completada

Paso 5 - Exportación del sitio > Exportación del sitio a Internet >

Exportación completada

 Return to chapter overview

Tras haber completado con éxito la publicación en línea (ver Exportación del sitio a Internet), esta ventana sugiere algunas acciones para publicitar el sitio web realizado a través de canales como la Gallery de WebSite X5, Google™, Facebook y Twitter.

Concretamente, las opciones disponibles son:

¡Su sitio web está en Internet!

Abre el explorador de Internet predeterminado para navegar en el sitio web nada más publicarlo en Internet para controlar que todo funcione correctamente.

WebSite X5 Gallery

Se conecta a la sección dedicada a la Gallery de WebSite X5 Answers para poder anunciar el sitio web nada más sea publicado. La Galería es un colección de sitios realizados con WebSite X5 cuya publicación es comunicada directamente por sus autores.

Actualizar el SiteMap en Google

Envía a Google™ la comunicación del SiteMap del Sitio que se acaba de publicar, a fin de solicitar su indexación por parte del spider del motor.

Publicación de difusión en Facebook

Permite visualizar una página de Facebook en la que, después de haber accedido, es posible escribir un comentario para avisar de la publicación del sitio web a todos los contactos del usuario. El comentario se mostrará en el muro del perfil del usuario.

Publicación de difusión en Twitter

Permite visualizar una página de Twitter en la que, después de haber accedido, es posible escribir un tweet para avisar de la publicación del sitio web a todos los contactos del usuario. El tweet se mostrará en el timeline del perfil del usuario.


Exportación al disco

Paso 5 - Exportación del sitio >

Exportación al disco

 Return to chapter overview

Esta ventana permite efectuar la publicación del sitio creado en otro disco del ordenador.

La exportación en disco sirve para tener una copia en el equipo de los archivos que serán publicados en el Servidor, para poderla copiar en CD/DVD/USB o para poder efectuar eventuales modificaciones en las páginas HTML creadas antes de que se haga efectiva la publicación.

Para proceder a la exportación de todos los archivos del proyecto, basta especificar:

§Carpeta de destino: permite especificar la carpeta donde exportar el sitio web creado. Si la carpeta especificada no existe, será creada automáticamente.

La Exportación al disco no es recomendable para la creación de copias de backup del proyecto, ya que permite disponer de archivos creados por el programa para la publicación en línea, no de archivos del proyecto sobre los que trabajar.

Para crear copias de seguridad del proyecto que sirvan para efectuar una recuperación de versiones precedentes, es preciso utilizar las funciones de backup incluidas en el menú Guardar.

En cambio, para crear una copia de backup para usar en caso de pérdida del proyecto original, es necesario usar la función Exportar el Proyecto: de esta manera se puede disponer, en efecto, de una copia de los archivos originales del proyecto.

Best practice:

-

Cómo administrar el backup de los proyectos


Exportar el Proyecto

Paso 5 - Exportación del sitio >

Exportar el Proyecto

 Return to chapter overview

Esta ventana permite exportar a un único archivo comprimido todos los archivos vinculados al proyecto, con el fin de poderlos transferir a otro ordenador o crear una copia de seguridad.

Para proceder a la exportación de los archivos del proyecto basta especificar:

§Carpeta de destino: especifica la carpeta a la que exportar el archivo de proyecto. Si la carpeta especificada no existe, es creada automáticamente.

Como resultado de la exportación se crea en la carpeta de destino especificada un único archivo comprimido cuyo nombre es el mismo del proyecto y cuya extensión es .IWZIP. Así, para el proyecto "MiProyecto" se creará el archivo MiProyecto.iwzip. Dentro de este archivo comprimido se guardan tanto el archivo de Proyecto (archivo .IWPRJ) como todos los archivos a él vinculados (por ejemplo, los relativos a imágenes, vídeos o animaciones importadas).

Antes de iniciar la exportación es posible activar las siguientes opciones:

§Incluir una copia de la vista previa de la página web: incluye en el archivo comprimido .IWZIP también los archivos necesarios para la visualización de la vista previa local del sitio web. Incluyendo estos archivos, el tamaño de archivo .IWZIP aumenta, pero no será necesario volver a crearlos cuando se importe el proyecto en otro equipo.

El archivo comprimido .IWZIP podrá ser transferido a un equipo diferente de aquel en el que fue creado, y se podrá abrir en el programa mediante el comando Importar..., disponible en la ventana Elección del proyecto.

Best practice:

-

Cómo administrar el backup de los proyectos


Cómo administrar el backup de los proyectos

Best practice > Ajustes preliminares >

Cómo administrar el backup de los proyectos

 Return to chapter overview
Mostrar/ocultar el texto oculto

Un aspecto de fundamental importancia en la gestión de un proyecto es las actividades de backup.

Hacer un backup de un proyecto significa hacer una copia de seguridad que se puede archivar en el PC mismo o en otro soporte de memoria , para asegurarse una cierta redundancia de los datos.

Disponer de uno o más copias de seguridad de un proyecto permite resolver dos tipos de problemas:

§Disaster recovery - es decir el restablecimiento del proyecto en caso de accidentes irreparables debidos, por ejemplo, a una avería en el ordenador o al borrado involuntario de datos.

§Versioning - es decir la creación de copias correspondientes a versiones diferentes del proyecto para, por ejemplo, poder anular las modificaciones hechas en una sesión de trabajo, simplemente recuperando una copia de reserva precedente.

Naturalmente, para que la actividad de backup sea eficaz debe ser correctamente configurada y efectuada de modo sistemático.

Pulsar para expandir/reducir How To: Versioning - Cómo configurar la creación automática de una copia de backup

Para configurar la creación automática de una copia de backup de un Proyecto es necesario:

§Abrir el proyecto.

§Activar la opción Crear una copia de seguridad con el primer guardado disponible en el menú Guardar.

§Como alternativa o contemporáneamente, activar la opción Hacer copia de seguridad con cada subida también disponible en el menú Guardar.

Mientras la opción Crear una copia de seguridad con el primer guardado hace que sea creada una copia de seguridad del proyecto anterior al primer guardado, la opción Hacer copia de seguridad con cada subida crea la copia de reserva antes de la publicación en línea del sitio web.

Todas las copias de backup así generadas se guardan dentro de la subcarpeta Backup que hay dentro de la Carpeta de proyectos especificada en la ventana Preferencias.
Pulsar para expandir/reducir How To: Versioning - Cómo restablecer una copia de backup de un proyecto

Para restablecer una copia de backup de un proyecto es necesario:

§Abrir la subcarpeta Backup que hay dentro de la Carpeta de proyectos (especificada en la ventana Preferencias) y seleccionar el archivo de la copia de backup que se desea restablecer: el archivo Backup.iwprj generado por la función Crear una copia de seguridad con el primer guardado o un archivo Uploaded_timestamp.iwprj generado por la función Hacer copia de seguridad con cada subida.

§Cortar el archivo seleccionado de la subcarpeta Backup y pegarlo dentro de la Carpeta de proyectos.

§Borrar el archivo Project.iwprj y renombrar el archivo de backup como "Project.iwprj".
Pulsar para expandir/reducir How To: Disaster Recovery - Cómo crear una copia de backup de un proyecto

Para crear una copia de backup de un proyecto que se archivará en un soporte diferente del PC en el que se está trabajando es necesario:

§En el Paso 5 - Exportación del sitio elegir Exportar el Proyecto para exportar en un único archivo comprimido (.IWZIP) todos los archivos vinculados al proyecto.

§Copiar el archivo .IWZIP obtenido en el soporte de memoria elegido para conservar la copia de backup.

Pulsar para expandir/reducir How To: Disaster Recovery - Cómo restablecer una copia de backup de un proyecto

Para restablecer una copia de backup de un proyecto archivada en un soporte diferente del PC en el que se está trabajando es necesario:

§En la ventana Elección del proyecto pulsar sobre el botón Importar... para seleccionar el archivo comprimido (.IWZIP) correspondiente al proyecto que se quiere restablecer.

§Seleccionar el proyecto restaurado para abrirlo y poder proceder con las modificaciones.


Cómo manejar los Idiomas para los textos insertados en automático

Cómo gestionar los idiomas para los textos añadidos automáticamente

Best practice > Paso 1 - Ajustes generales >

Cómo gestionar los idiomas para los textos añadidos automáticamente

 Return to chapter overview
Mostrar/ocultar el texto oculto

Algunos textos presentes en las páginas creadas con WebSite X5 son añadidos automáticamente por el programa; son textos como, por ejemplo, los enlaces a delimitadores internos, los botones del Objeto de Galería, las etiquetas del Objeto Formulario de envío e-mail, las etiquetas y los textos del carrito de la compra y los textos del Mapa del Sitio.

Para que estos textos añadidos automáticamente estén en el idioma correcto, es necesario especificar el idioma principar del sitio web mediante la opción Idioma de los contenidos disponible en la ventana Ajustes generales. Por defecto, WebSite X5 permite elegir entre un cierto número de idiomas, como italiano, inglés y alemán, de los que dispone ya de todas las traducciones necesarias. En cualquier caso, las traducciones predispuestas pueden ser modificadas, así como es posible también añadir o importar nuevos idiomas y eliminar los que ya no son necesarios. Para realizar estas operaciones es necesario acceder a la ventana Gestión de contenido de idioma pulsando el botón [image] que está al lado de la opción Idioma de los contenidos.

Pulsar para expandir/reducir How To: Cómo modificar un elemento ya introducido

Un ejemplo de texto añadido automáticamente por el programa son las etiquetas de los botones "Enviar" y "Restablecer" disponibles al final del los formularios de contacto.

Suponiendo qe se quiera cambiar la etiqueta "Restablecer" por "Anular", despuésde haber configurado "español" como lengua de los contenidos, es preciso proceder como sigue:

§En la ventana Gestión de contenido de idioma, si todavía no se ha activado, pulsar sobre el idioma "ES - Spanish" para ver la columna correspondiente en la tabla de contenidos.

§En la primera columna de la tabla de contenidos, buscar el elemento "form_reset" que es el que corresponde a la etiqueta que se quiere cambiar. Desplazarse por la fila hasta llegar a la celda correspondiente en la columna del idioma español. Hacer doble clic en la celda para hacer aparecer el cursor, borrar el texto "Restablecer" e introducir "Anular".

§Cerrar la ventana: de este modo los cambios efectuados se guardarán automáticamente.
Pulsar para expandir/reducir How To: Cómo agregar un nuevo idioma

Para crear un sitio en un idioma aún no disponible (por ejemplo, en portugués) evitando que los textos gestionados automáticamente sean añadidos en la versión inglesa (utilizada por defecto), es preciso predisponer un nuevo idioma e introducir las traducciones requeridas. Si se tiene la competencia lingüística necesaria, es una operación muy simple:

§En la ventana Gestión de contenido de idioma pulsar sobre el botón Agregar nuevo idioma y, mediante la ventana de diálogo que se abre, introducir la secuencia "PT - Português": de este modo, el nuevo elemento aparecerá al final de la lista de idiomas disponibles.

§Hacer clic en la opción "PT - Português" para visualizar la columna relativa a este idioma en la tabla de las traducciones.

§Hacer clic en las distintas celdas de la columna "PT - Português" para introducir las traducciones necesarias.

§Una vez introducidas las traducciones, cerrar la ventana: de este modo los cambios efectuados se guardarán automáticamente.

§En la ventana Ajustes generales configurar "PT - Português" como Idioma de los contenidos.
Pulsar para expandir/reducir How To: Cómo exportar/importar un idioma

Si se tiene la necesidad de desarrollar un sitio en un idioma no previsto por defecto por el programa en dos PC's diferentes, es posible exportar el nuevo idioma creado en un equipo e importarlo en el segundo equipo, evitando así tener que volver a crearlo desde el principio.

§En el primer equipo, acceder a la ventana Gestión de contenido de idioma, pulsar sobre el botón Agregar nuevo idioma y proceder a la creación del nuevo idioma.

§Seleccionar el idioma creado de la lista de idiomas y pulsar el botón [image] Exportar el idioma seleccionado: se guardará un archivo .XML en la carpeta especificada.

§Copiar el archivo .XML obtenido en el segundo equipo.

§Abrir el programa, acceder a la ventana Gestión de contenido de idioma y pulsar sobre el botón [image] Importar nuevo idioma seleccionando el archivo .XML al que se ha exportado el idioma.

Si el idioma importado está ya en la lista no se duplica sino que solamente se añaden las nuevas voces y se actualizan aquellas que fueron modificadas.

Best practice:

-

Cómo crear un sitio web multi-idioma


Qué hacer para usar Google Webmaster Central™

Best practice > Paso 1 - Ajustes generales > Integración con Google >

Qué hacer para usar Google Webmaster Central™

 Return to chapter overview

Google WebMaster Tools™ es una suite de herramientas ofrecidas gratuitamente por Google™ para permitir a los WebMasters hacer los sitios web según sus indicaciones. Estas herramientas sirven para descubrir cómo Google™ ve un sitio web y son de gran ayuda para diagnosticar posibles problemas. Si se los usa adecuadamente, pueden jugar un papel en mejorar la visibilidad del sitio web en el motor de búsqueda.

Para poder utilizar Google Webmaster Central™ es preciso, en primer lugar, tener una cuenta Google propia, y también demostrar ser realmente el propietario del sitio web que se desea analizar. Uno de los métodos para demostrar ser el propietario de un sitio web es copiar un metatag suministrado por Google™ y pegarlo en la página de inicio del sitio en la primera sección <head> de la página, antes de la sección <body>.

Resumiendo, los pasos a seguir son:

§Tener una cuenta en Google™.

§Ir a la página de presentación de Google WebMaster Tools™ y acceder a nuestra cuenta.

§En la página Inicio pulsar sobre el botón Añadir un sitio, introducir el URL del sitio web que se quiere monitorizar, y confirmar pulsando en Continuar.

§En la página Verificar la propiedad a la que se accede, elegir como método de verificación Añadir un metatag a la página de inicio de tu sitio web.

§Copiar el metatag proporcionado por Google™ y pegarlo en el campo Metatag de control para Google WebMaster Central de la ventana Ajustes generales | Avanzado de WebSite X5: el programa se ocupará de insertar el metatag en la posición correcta dentro del código HTML de la Página de Inicio.

§El metatag de control proporcionado por Google™ se presenta como en el ejemplo siguiente:

<meta name="verify-v1" content="VOPYsjbR4uw/YqV+MWLB0lVmJt0niwdkv9PQTsTREHQ=" />

§Después de haber publicado el sitio web en línea, volver a esta misma página de Google WebMaster Tools™ y completar el procedimiento pulsando en Verificar.


Cómo activar un servicio de estadísticas como, por ejemplo, Google Analytics

Cómo activar un servicio de estadísticas como Google Analytics™

Best practice > Paso 1 - Ajustes generales > Integración con Google >

Cómo activar un servicio de estadísticas como Google Analytics™

 Return to chapter overview

En la red hay numerosos servicios de estadísticas disponibles y, entre éstos, uno de los más conocidos es el proporcionado por Google: Google Analytics™. Gracias a esta herramienta, completamente gratuita, es posible disponer de numerosos informes para monitorizar y analizar, incluso detalladamente, los accesos al sitio. Google Analytics™ puede ser utilizado a diferentes niveles: se puede empezar con registrar simplemente el número de visitas o ir más allá llegando a explorar la evolución de las campañas publicitarias realizadas con el programa Adsense™.

Para poder aprovechar Google Analytics™ es preciso decir al motor qué sitio queremos analizar y, concretamente, qué páginas deben ser examinadas: para hacer esto es preciso añadir un código de monitorización dentro del código de las páginas del sitio web.

Resumiendo, los pasos a seguir son:

§Tener una cuenta en Google™.

§Ir a la página de presentación de Google Analytics™ y acceder a nuestra cuenta.

§En la página Configuración Analytics añadir el sitio web que se quiere monitorizar utilizando el comando Añadir nuevo perfil.

§Una vez creado el perfil, en la página Panorámica pulsar el botón Editar de la columna Acciones para el sitio web sobre el que se quiere trabajar.

§En la página Configuración de perfil a la que se accede aparece el rótulo "Monitorización desconocida": pulsar sobre Verificar estado para ver el código que se utiliza para la monitorización de las páginas.

§Copiar el código para la monitorización suministrado por Google™, abrir la ventana Ajustes generales | Avanzado de WebSite X5 y pegarlo en el campo relativo a la opción Código personalizado, especificando que debe ser introducido Antes del cierre de la etiqueta HEAD.

El código para la monitorización proporcionado por Google™ se presenta como en el ejemplo siguiente:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-110367-1");

pageTracker._trackPageview();

} catch(err) {}</script>


Cómo crear y conectar el SiteMap del sitio web

Best practice > Paso 1 - Ajustes generales > Integración con Google >

Cómo crear y conectar el SiteMap del sitio web

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 es capaz de generar el SiteMap XML del sitio web.

Un SiteMap es un archivo XML que contiene la lista de las páginas de un sitio web. Fue introducido por Google™ (y ahora lo utilizan también Yahoo! y MSN) para efectuar un mejor y más rápido barrido de los sitios web. En otras palabras, creando y enviando el SiteMap, los Webmasters pueden estar seguros de que un motor de búsqueda, en concreto Google, sepa de todas las páginas presentes en un sitio, incluidas aquellas que correrían el riesgo de no ser localizadas mediante un procedimiento de barrido normal.

Mediante el SiteMap es también posible transmitir a los motores de búsqueda información referida a los contenidos del sitio web como vídeos, imágenes, noticias, etc. Además, el SiteMap puede contener información adicional como la frecuencia con la que es actualizada cada página, la fecha de la última modificación de las páginas, la importancia de cada página en la estructura del sitio web (esta prioridad no influye en ningún caso en la posición de las páginas en los resultados de las búsquedas).

Pulsar para expandir/reducir How To - Cómo activar el SiteMap

Para generar y enlazar el SiteMap a un sitio web basta dejar activa, como está por defecto, la opción Crear un SiteMap automáticamente de la ventana Ajustes generales | Avanzado.

Una vez hecho esto, es posible hacer que en el SiteMap se introduzca alguna información adicional, específica para cada Página, del siguiente modo:

§En el Paso 2 - Creación de mapa seleccionar la página en la que se desea trabajar.

§Pulsar sobre el botón Propiedades... para abrir la ventana Propiedades de la página y abrir la sección Avanzado.

§Dejando activa la opción Agregar esta página al SiteMap, configurar la Prioridad de contenidos y la Frecuencia de actualización.

§Repetir esta operación en las diferentes páginas del sitio web.
Pulsar para expandir/reducir How To - Cómo añadir las imágenes al SiteMap

El SiteMap puede ser utilizado también para suministrar a Google™ información adicional sobre las imágenes presentes en un Sitio, ayudándolo así a encontrar imágenes que de otro modo no podría encontrar (por ej., porque están incluidas en módulos JavaScript) y a comprender cuáles son más importantes respecto a otras. No insertando en el SiteMap las imágenes que forman parte de la plantilla gráfica o que tienen un valor puramente decorativo, por ejemplo, se indica a Google™ que son menos importantes que las demás.

Google™ especifica que dentro de un SiteMap es posible insertar un máximo de 1.000 imágenes para cada Página y que, en cualquier caso, no se garantiza la indexación de todas las imágenes o el uso de toda la información introducida.

Una vez activada la creación del SiteMap, es posible añadir la información a una imagen de una manera muy sencilla:

§Hacer doble clic sobre el Objeto Imagen correspondiente a la imagen en la que se quiere trabajar para acceder a la ventana Objeto Imagen.

§Abrir la sección SiteMap y activar la opción Agregar imagen al SiteMap.

§En los casos que se desee, rellenar los campos Título, Descripción breve, Posición geográfica (por ejemplo, dirección, ciudad, etc.) y URL de la licencia.

§Repetir la operación descrita para todas las imágenes importantes contenidas en el sitio web.

Para más información, ver Objeto Imagen | SiteMap.
Pulsar para expandir/reducir How To - Cómo añadir información sobre los vídeos en el SiteMap

El SiteMap puede ser utilizado también para dar información a Google sobre los vídeos que hay en un Sitio. También en este caso, Google™ no da garantías pero añadir los vídeos en el SiteMap puede hacer que estos contenidos puedan ser fácilmente registrados y, en consecuencia, incluidos en la búsqueda de Google Vídeo™.

Mediante el SiteMap es posible especificar una serie de información adicional, como por ejemplo el título, descripción y duración del vídeo, que pueden simplificar la búsqueda. Así pues, estos y otros datos son propuestas en las páginas con los resultados de las búsquedas (SERP). Es importante subrayar, sin embargo, que en caso de diferencias Google™ podría decidir utilizar en las SERP el texto disponible en la página del vídeo en lugar de los contenidos predispuestos mediante el SiteMap.

Para completar el SiteMap del sitio web añadiendo la información en los vídeos que haya, basta proceder del siguiente modo:

§Hacer doble clic sobre el Objeto Vídeo/Sonido correspondiente al vídeo en el que se quiere trabajar para acceder a la ventana Objeto Vídeo/Sonido.

§Abrir la sección SiteMap y activar la opción Agregar vídeo al SiteMap.

§Introducir la información que se quiere que esté presente obligatoriamente en el SiteMap: Título, Descripción breve y Vista previa de imagen para el vídeo.

§Opcionalmente, definir también los siguientes parámetros: Categoría, Palabras clave para la búsqueda, Fecha de publicación, Duración (segs.) y Contenido apto para todos los públicos.

§Repetir la operación descrita para todos los vídeos importantes contenidos en el sitio web.

Para más información, ver Objeto Vídeo/Sonido | SiteMap.
Pulsar para expandir/reducir How To - Cómo eliminar una página del SiteMap

Por defecto, una vez activada la creación del SiteMap, todas las páginas de un sitio web son incluidas en él. Si se desea que los motores de búsqueda no tomen en consideración una o más páginas, basta eliminarlas del SiteMap. Para hacer esto basta proceder del siguiente modo:

§En la ventana Paso 2 - Creación de mapa, seleccionar la página que se desea eliminar del SiteMap.

§Pulsar sobre el botón Propiedades... para abrir la ventana Propiedades de la página y abrir la sección Avanzado.

§Quitar la marca de verificación la opción Agregar esta página al SiteMap.

§Confirmar y guardar.

Fuentes:

- | SiteMap (Wikipedia.it)
- | Información sobre los SiteMaps (Centro WebMaster de Google)
- | Añadir información sobre las imágenes a un Sitemap (Centro WebMaster de Google)
- | Información sobre los contenidos de vídeo de los SiteMaps (Centro WebMaster de Google)


Cómo trabajar con las plantillas

Best practice > Paso 1 - Ajustes generales > Las plantillas gráficas >

Cómo trabajar con las plantillas

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 permite una gestión de las plantillas gráficas muy ágil y flexible. Gracias al rico archivo de plantillas predefinidas, a las numerosas opciones para la personalización y, sobre todo, a la posibilidad de crear cada uno sus propias plantillas a partir de cero, cualquier usuario puede obtener el resultado gráfico deseado eligiendo el método de trabajo que más le satisface.

Finalmente, la posibilidad de exportar e importar las plantillas (extrayéndolas de hecho de los proyectos para los que fueron creadas) facilita enormemente la posibilidad de compartir estos recursos.

Pulsar para expandir/reducir How To: Cómo configurar una plantilla predefinida

WebSite X5 pone a disposición del usuario una galería de más de 1.500 plantillas gráficas predefinidas. Tomar una plantilla eligiéndola entre las predefinidas es muy sencillo:

§Abrir la ventana Tonalidad de la plantilla y utilizar el filtro referido al Tipo de menú para visualizar solo las plantillas que tienen el menú en la orientación que nos interesa (horizontal o vertical).

§Desplazarse por las vistas previas de las plantillas hasta encontrar la que se adapta mejor al tema tratado en nuestro sitio web.

§Una vez identificada la plantilla que se quiere emplear, seleccionarla y pulsar el botón Siguiente para aplicarla al proyecto y pasar a la ventana Editor de plantilla para añadir elementos al encabezado y al pie de página.
Pulsar para expandir/reducir How To: Cómo configurar una plantilla personalizada

Una vez creado una base gráfica mediante un programa de edición externo, es posible utilizarlo en WebSite X5 sirviéndose de la posibilidad de utilizar una plantilla personalizada:

§Abrir la ventana Tonalidad de la plantilla y utilizar el filtro referido a las Categorías para visualizar las plantillas personalizadas.

§Si no han sido creadas otras con anterioridad, en la lista aparecerá en cualquier caso una plantilla personalizada: seleccionarla y pulsar el botón Editar... (o hacer doble clic sobre la plantilla) para acceder a la ventana Plantilla personalizada.

§Si en cambio se desea crear una nueva plantilla personalizada que añadir a la galería, pulsar el botón Nueva plantilla: una vez dado un nombre a la plantilla, se podrá proceder a personalizarla.

Todas las plantillas personalizadas creadas pasarán a enriquecer la galería de plantillas y estarán de este modo disponibles también para otros proyectos distintos de aquel para el que fueron creadas.
Pulsar para expandir/reducir How To: Cómo crear una nueva plantilla a partir de una plantilla predefinida

Una plantilla predefinida puede ser un excelente punto de partida para realizar una nueva plantilla personalizada, a fin de obtener un diseño gráfico más original y adecuado para el contenido del sitio web. Es preciso proceder como sigue:

§Abrir la ventana Tonalidad de la plantilla y, valiéndose de los filtros disponibles, encontrar y seleccionar la plantilla predefinida de la que se va a partir.

§Pulsar sobre el botón Duplicar para obtener una copia de la plantilla: esta copia se guardará entre las plantillas predefinidas.

§Seleccionar la copia de la plantilla y pulsar el botón Siguiente para abrir la ventana Plantilla personalizada y aportar los cambios necesarios.
Pulsar para expandir/reducir How To: Cómo importar/exportar una plantilla

La plantilla gráfica creada para un proyecto puede ser fácilmente exportada para poder más tarde importarla y utilizarla en otros equipos, pudiendo también así ser usada por otros usuarios.

Para exportar una plantilla creada:

§Abrir la ventana Tonalidad de la plantilla, seleccionar la plantilla creada y pulsar el botón Exportar...: se creará un archivo .IWTLP en la carpeta de exportación indicada.

§Copiar el archivo .IWTPL al equipo desde el que se quiere importar la plantilla.

Para importar una plantilla que ha sido exportada con WebSite X5:

§Abrir la ventana Tonalidad de la plantilla y pulsar sobre el botón Importar...: seleccionar el archivo .IWTPL correspondiente a la plantilla que se quiere importar.

§La plantilla importada estará disponible en la lista de plantillas personalizadas.

En los archivos .IWTPL se guardan solo las imágenes y los ajustes referidos a la plantilla gráfica: en el proceso de exportación no permanece ninguna información referida al proyecto.

Para exportar un proyecto es necesario utilizar las funciones al efecto propuestas en el Paso 5 - Exportación del sitio.

Best practice:

-

Dónde encontrar nuevas plantillas para WebSite X5


Dónde encontrar nuevas plantillas para WebSite X5

Best practice > Paso 1 - Ajustes generales > Las plantillas gráficas >

Dónde encontrar nuevas plantillas para WebSite X5

 Return to chapter overview

Si estás buscando una nueva plantilla para usar en la creación o en la reelaboración de tu sitio web, puedes encontrar muchas sugerencias en WebSite X5 Templates, la sección del sitio web oficial de WebSite X5, en la dirección http://answers.websitex5.com/templates.

En WebSite X5 Templates encontrarás numerosas plantillas gráficas nuevas, realizadas por Incomedia o por otros usuarios, tanto gratuitas como de pago, y podrás descargarlas y utilizarlas para tus proyectos.

Podrás, además, colaborar tú mismo con el crecimiento del archivo de plantillas proponiendo tus trabajos. Si eres un apasionado de diseño gráfico para web, puedes convertirte en uno de nuestros autores afiliados, proponer tus plantillas y ganar dinero por esta actividad. Para mayor información sobre la afiliación http://answers.websitex5.com/templates.

En fin, no olvides visitar periódicamente WebSite X5 Templates para ver qué novedades hay. Si lo deseas, puedes suscribirte a la fuente RSS y mantenerte constantemente informado sobre las últimas novedades.


Cómo crear un Mapa y trabajar con él

Best practice > Paso 2 - Creación de mapa >

Cómo crear un Mapa y trabajar con él

 Return to chapter overview
Mostrar/ocultar el texto oculto

En WebSite X5 el Mapa del Sitio tiene la típica estructura en árbol: se comienza con una Página de Inicio y se desciende hasta los diferentes niveles, pasando por las diferentes páginas añadidas. La creación del Mapa supone por lo tanto que además de la Página de Inicio, siempre presente, haya una serie de páginas vinculadas por medio del Menú: por esta razón es necesario insertar todas las páginas organizando al mismo tiempo los niveles del Menú.

Recordamos que en WebSite X5 los niveles son categorías y no páginas con contenidos propios. Para ser simples, los niveles se pueden entender como "contenedores de páginas".

Tampoco los separadores tienen contenidos: son elementos que sirven para organizar visualmente el menú de navegación.

Pulsar para expandir/reducir
Ejemplo de Mapa y del Menú correspondiente

El objetivo al diseñar el Mapa será, por tanto, crear una estructura en la que todos los contenidos del sitio web estén organizados de una manera lógica para que quien consulta el sitio los encuentre fácilmente.

Pulsar para expandir/reducir How To: Cómo diseñar el Mapa del Sitio

Desde un punto de vista práctico, diseñar el Mapa del Sitio en WebSite X5 es muy sencillo:

§En la ventana del Paso 2 - Creación de mapa usar los botones Nuevo nivel, Nueva página y Separador para añadir al Mapa, respectivamente, un nuevo Nivel, una nueva página o un nuevo separador.

§Todos los elementos del Mapa deben estar designados con esmero, ya que se tomarán como elementos del Menú de navegación y como nombres de archivos. Para cambiar el nombre de un elemento basta pulsar dos veces sobre él o utilizar el botón Renombrar.

§El Mapa puede ser modificado en cualquier momento, cambiando de lugar las páginas, niveles o separadores introducidos. Para ello es preciso seleccionar el elemento que se quiere mover y arrastrarlo hasta la posición deseada (Drag&Drop), o usar los botones Mover arriba / Mover abajo.
Pulsar para expandir/reducir How To: Cómo trabajar con el Mapa (comandos y atajos)

Trabajando directamente en el Mapa es posible aprovechar algunos atajos para llevar a cabo las operaciones más rápidamente:

§Pulsando nuevamente sobre un Nivel, sobre una página (incluida la Página de Inicio) o sobre un separador ya seleccionado, es posible cambiarles el nombre (como alternativa al botón Renombrar). También los Alias de las páginas especiales introducidos en la carpeta Menú pueden ser renombrados, mientras que la páginas especiales no.

§Después de haber seleccionado una página, pulsando directamente sobre el Título completo de la página o sobre la Descripción indicados, se pueden modificar los textos introducidos (como alternativa se puede abrir de nuevo la ventana Propiedades de la página).

§Haciendo doble clic en un Nivel es posible expandirlo y ver todas las páginas que contiene, o reducirlo (como alternativa a los botones Expandir y Reducir). De manera análoga, también se puede expandir y reducir un Nivel haciendo clic en la flecha que hay antes del nombre.

§Haciendo doble clic sobre una página, se pasa a la ventana Creación de la página para proceder a su construcción.

§Haciendo doble clic sobre una Página Especial, se accede a la ventana del Paso 4 - Ajustes avanzados que da la posibilidad de crearla o actualizarla.

§Seleccionando un Nivel y arrastrándolo a una nueva posición, este resulta desplazado con todas las páginas en él contenidas (como alternativa a los botones Subir y Bajar).

§Seleccionando una o más páginas es posible arrastrarlas y moverlas a una nueva posición (como alternativa a los botones Subir y Bajar). Para hacer una selección múltiple es posible reurrir a la combinación CTRL + clic o SHIFT + clic. La selección múltiple puede incluir también páginas invisibles o protegidas.

§Seleccionando la carpeta Menú es posible esconder completamente el menú de navegación, pulsando el botón Página no visible en el menú.

§Seleccionando una página especial y arrastrándola al interior de la carpeta Menú, es decir entre las páginas y los niveles que conformarán el menú de navegación, se crea un Nivel que se comporta como Alias de la página especial misma. Así pues, dicho Nivel tiene el mismo nombre que la página especial y tiene configurado el enlace a la página especial misma. De este modo es posible añadir en el menú de navegación un elemento activo que da acceso a la página con los resultados del motor de búsqueda interno, a la Página de Bienvenida, a la Página de Acceso o al Carrito de la compra.

§Seleccionando una o más páginas es posible copiarlas o pegarlas dentro del mismo proyecto o en un proyecto distinto abierto en otra ventana del programa. Las operaciones de copiar y pegar pueden ser efectuadas a través de los comandos correspondientes de la Barra de Herramientas, del menú contextual que se abre pulsando el botón derecho del ratón, o mediante las habituales combinaciones de teclas CTRL+C y CTRL+V. Naturalmente, no es posible usar los comandos Copiar y Pegar con las páginas especiales.


Cómo configurar una página con la rejilla de maquetación

Cómo configurar una página a través de la rejilla de maquetación

Best practice > Paso 3 - Creación de la página >

Cómo configurar una página a través de la rejilla de maquetación

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 propone un sistema de maquetación único gracias al que se consigue crear las páginas de un modo completamente visual.

Prácticamente, la página aparece representada por una rejilla en la que es posible establecer el número de filas y de columnas a fin de predisponer las celdas necesarias para alojar los contenidos.

Mediante el simple Drag&Drop de los objetos disponibles se procede a la inserción de los contenidos.

Pulsar para expandir/reducir Referencia: Cómo configurar la rejilla de maquetación

Comenzando con la rejilla propuesta por defecto, conformada por 2 filas y 2 columnas, se procede a añadir un número de filas y de columnas suficiente para alojar todos los contenidos de la página y, en segundo lugar, añadir en las celdas los objetos necesarios.

Para añadir filas y columnas basta usar los botones [image] [image] que hay en la barra de herramientas. Se pueden crear rejillas con un máximo de 64 filas y 12 columnas.

Automáticamente, todas las filas y las columnas de la rejilla de maquetación tienen la misma anchura y altura. Es posible configurar manualmente el valor absoluto (en píxeles) o relativo (en porcentaje) de las columnas mediante los cursores presentes en el fondo de la rejilla de maquetación:

§Haciendo clic y arrastrando un cursor, se desplaza la línea que delimita la columna. De esta manera, la columna asume la anchura especificada en la nota visible durante el arrastre del cursor. Teniendo pulsada la tecla CTRL durante el arrastre del cursor, este se desplaza píxel a píxel. En caso contrario, el desplazamiento se efectúa en fracciones de un décimo del espacio disponible.

Pulsar para expandir/reducir

§Pulsando con el botón derecho del ratón sobre un cursor y eligiendo "ajustar ancho columna" del menú contextual, se puede introducir directamente el valor en píxeles de la anchura de la columna.

Pulsar para expandir/reducir

§Pulsando con el botón derecho del ratón sobre un cursor y eligiendo "Igualar anchura columnas" del menú contextual, se vuelve a poner una anchura igual a todas las columnas.
Pulsar para expandir/reducir Referencia: Cómo añadir contenidos en la rejilla

Una vez configurada la rejilla de maquetación, es posibel añadir un Objeto seleccionando el icono que lo representa de la lista de objetos disponibles, arrastrándolo y soltándolo en la celda que se quiere que ocupe.

Cada celda de la rejilla de maquetación puede contener un único objeto, pero un objeto puede ocupar varias Celdas adyacentes, tanto en sentido horizontal como vertical. El icono del objeto seleccionado, de hecho, puede ser arrastrado sobre los bordes de las celdas: en ese caso, el objeto ocupará el espacio de esas celdas. Además, es posible usar los anclajes de la selección del objeto añadido para extenderlo a más celdas.

Una vez definido el número de celdas que debe ocupar un objeto, este se mantendrá, en compatibilidad con la presencia de otros objetos, incluso si el objeto es desplazado a otros puntos de la rejilla. Para mayor comodidad, es posible trabajar en la rejilla utilizando las teclas de cursor:

§teclas de cursor: desplazan la selección de una celda a otra de la rejilla de maquetación

§CTRL + teclas de cursor desplazan el objeto seleccionado (manteniendo su tamaño) entre las celdas de la rejilla de maquetación.

§SHIFT + teclas de cursor modifican el tamaño del objeto seleccionado extendiéndolo (en compatibilidad con otros objetos presentes) o comprimiéndolo hacia un número distinto de celdas de la rejilla de maquetación.

Haciendo clic en el botón derecho del ratón sobre el icono del objeto añadido en una celda, o en una celda vacía de la rejilla de maquetación, se abre un menú contextual con los comandos Cortar, Copiar, Pegar, Eliminar, Propiedades de la celda, Insertar fila, Insertar columna, Eliminar fila y Eliminar columna.

A través de estos comandos es posible, por ejemplo, crear una copia de un objeto pegándolo en otra celda, en otra página, o eliminarlo. Un objeto añadido puede ser eliminado de la página también arrastrándolo fuera de la rejilla de maquetación o mediante la tecla SUPR. En cualquier caso, añadiendo un objeto nuevo a una celda ya ocupada, el objeto ya existente se borra y es sustituido por el segundo. Ahora bien, si se arrastra un objeto ya existente a una celda ya ocupada, los dos objetos son intercambiados de posición.

Los comandos Copiar estilo y Pegar estilo, presentes en el submenú que se abre con el comando Estilo de celdas, permiten hacer que los ajustes definidos en la ventana Estilo de celdas para una celda se apliquen automáticamente también a una segunda celda.

Después de haber añadido un objeto se puede abrir la ventana en la que se podrá definir su contenido (Objeto de Texto, Objeto Imagen, Objeto Tabla, Objeto de Galería, Objeto Vídeo/Sonido, Objeto Formulario de envío e-mail, Objeto Libro de Visitas, Objeto Red Social, Objeto Mapa, Objeto de Animación Flash, Objeto de Lista de Productos, Objeto HTML y Widgets), haciendo doble clic en la celda de la rejilla de maquetación que lo contiene o seleccionando el objeto y pulsando el botón [image] Contenido Objeto.

No es obligatorio ocupar todas las celdas de la rejilla de maquetación: se debe tener en cuenta sin embargo que una celda vacía corresponderá a un espacio vacío en la página.

Para comprender mejor cómo aprovechar al máximo las posibilidades de maquetación, es preciso recordar que el funcionamiento del programa se atiene a las siguientes reglas:

§La anchura de la página está determinada por la plantilla.

§La anchura de las columnas de la rejilla de maquetación se obtiene dividiendo la anchura de la página por el número de columnas añadidas. Por defecto, todas las columnas tienen igual anchura, pero es posible modificar manualmente dicho parámetro.

§Todas las celdas predispuestas en una misma fila de la rejilla de maquetación tienen la misma altura: por defecto, este valor está determinado por el objeto más alto entre los contenidos en esas celdas.

§Los objetos añadidos cambian automáticamente de tamaño en función del tamaño de las celdas de la rejilla de maquetación.

Profundización:

-

El Box Model en WebSite X5


Cómo trabajar en el Estilo de celdas

Best practice > Paso 3 - Creación de la página >

Cómo trabajar en el Estilo de celdas

 Return to chapter overview
Mostrar/ocultar el texto oculto

Trabajando en la Creación de la página, después de haber arrastrado uno de los objetos disponibles dentro de una celda de la Rejilla de maquetación, es posible definir el aspecto gráfico de la celda pulsando el botón [image] y usando las opciones ofrecidas en la ventana Estilo de celdas que se abre.

Pulsar para expandir/reducir How To: Cómo crear una imagen de fondo que se adapte al tamaño de la celda

Se puede personalizar el aspecto de la celda de varias maneras: entre otras cosas es posible importar una imagen (archivo en formato .JPG, .GIF, .PNG) y usarla como fondo de la misma celda. Según el tipo de imagen importada será necesario elegir la opción Fondo con imagen, definiendo ajustes diferentes para los elementos Repetir y Alineación, o utilizar la opción Ajustar imagen a la Celda para obtener el mejor resultado.

Ejemplo 1

La imagen importada tiene el mismo tamaño que la celda.

Fondo del sitio: Fondo con imagen

Repetir: No repetir

Alineación: Arriba-Izquierda

Pulsar para expandir/reducir

Ejemplo 2

La imagen importada es un patrón, es decir una imagen creada de modo que uniendo dos o más iguales, ya sea en horizontal como en vertical, no se nota el punto de unión.

Fondo del sitio: Fondo con imagen

Repetir: Imagen en mosaico

Alineación: Arriba-Izquierda

Pulsar para expandir/reducir

Ejemplo 3

La imagen importada es la de un marco que se deberá adaptar a celdas de tamaños diferentes.

Fondo del sitio: Ajustar imagen a la Celda

Bloquear ancho / Bloquear altura: configurar los tamaños de los bloques más apropiados.

Pulsar para expandir/reducir

Para comprender mejor cómo funciona la opción Ajustar imagen a la Celda, qué son los bloques y cómo ajustar correctamente los tamaños, contemplemos las siguientes imágenes:

Imagen 1 | Imagen 2 | Imagen 3

La imagen originarl (Imagen 1) representa un marco muy elaborado pero que se presta bien a ser cortado en bloques y a adaptarse a cualquier tamaño que la celda asuma: los elementos decorativos añadidos en las esquinas ocupan, de hecho, un área bien definida y fácilmente delimitable y todos los matices pueden ser repetidos como un patrón sin que se produzcan cambios bruscos de tonalidad.

En la imagen 2 se ven los bloques de los que hay que ajustar el tamaño (opciones Bloquear ancho y Bloquear altura). Los valores de la anchura y de la altura de los bloques (todos iguales entre sí) son definidos en porcentaje respecto a la anchura y a la altura de la imagen original y pueden variar entre el 5 y el 45%. En este caso, es necesario ajustar el tamaño del corte al 35% por ambos lados de los bloques para que abarquen completamente la imagen situada en las esquinas.

Como se ve en la imagen 3, identificando los bloques A, B, C y D es posible sacar otras 5 secciones, a, b, c, d y e: estos son los cortes que el programa efectúa para extraer de la imagen original todas las imágenes necesarias para conformar el fondo de la celda. Por tanto, mientras las imágenes correspondientes a los bloques A, B, C y D se mantienen tal como son y simplemente se posicionan en las esquinas, las imágenes correspondientes a las secciones a, b, c, d y e se repiten hasta llenar todo el espacio necesario.

Como se puede ver fácilmente, este procedimiento admite una notale flexibilidad: a partir de una sola imagen adecuadamente realizada, es efectivamente posible resolver el aspecto de celdas con tamaños incluso muy diferentes entre sí.

Pulsar para expandir/reducir How To: Cómo utilizar la Librería de Estilos de Celda

Gracias a la Librería es posible reducir el tiempo de trabajo: si se prevé tener que dar a varias celdas la misma configuración gráfica, es conveniente definirla para la primera Celda, guardar el Estilo y aplicarlo, sin crearlo de nuevo cada vez, a las demás celdas.

Para crear un nuevo Estilo:

§En la Rejilla de maquetación seleccionar la celda en la que se quiere trabajar y pulsar el botón [image] para abrir la ventana Estilo de celdas.

§Utilizar las opciones disponibles en las diferentes secciones Estilo y Textos para obtener el resultado deseado.

§Abrir la sección Biblioteca y pulsar sobre el botón Agregar: según los ajustes definidos se crea un nuevo Estilo. Una vista previa del Estilo creado se añade a la lista de estilos Personalizada.

Para aplicar un Estilo:

§En la Rejilla de maquetación seleccionar la celda en la que se quiere trabajar y pulsar el botón [image] para abrir la ventana Estilo de celdas.

§Abrir directamente la sección Biblioteca y seleccionar la vista previa del estilo que se quiere utilizar, escogiéndolo de la lista de estilos Valores preestablecidos o en la de los estilos Personalizada.

§Pulsar sobre el botón Aplicar.

Profundización:

-

"El Box Model en WebSite X5"


Cómo crear un sitio web multi-idioma

Best practice > Paso 4 - Ajustes avanzados >

Cómo crear un sitio web multi-idioma

 Return to chapter overview
Mostrar/ocultar el texto oculto

Internet permite sobrepasar las fronteras nacionales y, si se espera que el sitio web será consultado también por personas de otra nacionalidad, es aconsejable ofrecer la elección entre varios idiomas.

Gestionar un sitio web en idiomas diferentes añade un cierto grado de complejidad al proyecto, pero gracias a las funciones que WebSite X5 pone a disposición y pudiendo contar con un buen servicio de traducción, esta tarea puede ser llevada a cabo brillantemente.

En primer lugar, es importante reseñar que WebSite X5 genera todos los archivos HTML de las páginas de un sitio web utilizando la codificación de caracteres UTF-8 (Unicode Transformation Format 8 bit). Gracias a la utilización de la UTF-8 es posible realizar sitios web en cualquier lengua, incluidas las que utilizan alfabetos diferentes del latino, como por ejemplo el griego, el cirílico, el copto, el armenio, el hebreo y el árabe, sin olvidarnos del chino, el japonés o el coreano. Además, no solo es posible crear un sitio web en cualquier idioma sino también es posible contar con textos en lenguas diferentes dentro de un mismo sitio, sin tener problemas de visualización de caracteres: por ejemplo, podremos considerar tranquilamente poner un texto en ruso con su traducción al lado en español.

En la tarea de creación de un sitio web, WebSite X5 permite, en primer lugar, asociar una lengua al proyecto (en los Ajustes generales | General opción Idioma de los contenidos): este paso es fundamental para una correcta gestión de los textos que el programa añade automáticamente. Además de algunos idiomas preinstalados, es posible acceder a la ventana Gestión de contenido de idioma pulsando el botón [image] para crear/importar otros idiomas o modificar los elementos de los ya presentes (ver Cómo manejar los idiomas para los textos añadidos automáticamente).

Por último, WebSite X5 permite crear un sitio web multi-idioma en el que se da al visitante la posibilidad de elegir el idioma de consulta que prefiere entre los que hay disponibles. En este caso, no hace falta más que crear un proyecto para cada idioma y unirlos entre sí como si fuesen secciones diferentes de un único sitio web. Los modos de unir proyectos entre sí que se diferencian solo en el idioma de consulta son básicamente dos: el primero se sirve de la página de bienvenida, el segundo de la posibilidad de insertar enlaces directamente en el encabezado de la plantilla.

Pulsar para expandir/reducir How To: Cómo crear un Sitio multi-idioma mediante la Página de inicio

Suponiendo que queremos crear un sitio consultable en español, inglés y portugués, es posible utilizar la Página de bienvenida para insertar los botones que permiten al visitante elegir en qué idioma quiere ver los contenidos.

§Antes de anda, es necesario crear el sitio web en español definiendo su estructura y sus contenidos en Ajustes generales | General configurar "ES - Spanish" como Idioma de los contenidos.

§En el Paso 4 - Ajustes avanzados pulsar sobre el botón Página de bienvenida y, en la ventana correspondiente, activar la opción Mostrar la página de bienvenida especificando qué imagen/animación mostrar como Fondo de la página y ajustando todos los parámetros necesarios para darle el aspecto deseado.

§Para crear los botones para la elección del idioma, activar la opción Mostrar vínculos a otros idiomas.

§Mediante los comandos disponibles, componer la Lista de idiomas. De la lista propuesta, seleccionar los elementos "Deutsch", "Italiano" y "Français", correspondientes a las lenguas no contempladas, y pulsar el botón Eliminar. Pulsar a continuación sobre el botón Agregar... para abrir la ventana Configurar idioma y añadir el idioma portugués: como Nombre de idioma que debe mostrarse introducir "português" e importar un archivo para la imagen asociada.

§De manera análoga, seleccionar los elementos "Español" y "English" y pulsar el botón Editar... para abrir la ventana Configurar idioma y añadir las imágenes de las banderas que faltan.

§Puesto que el proyecto actual es en español (el único al que se asociará la página de bienvenida), seleccionar el elemento "Español" de la Lista de idiomas y pulsar sobre el botón Valor preestablecido.

§Usar los botones Subir y Bajar para ordenar los idiomas del modo más oportuno.

Añadir las imágenes de las banderitas de las lenguas, es preciso definir los enlaces sobre ellas. Suponiendo que se creará un sitio para cada lengua y que este será publicado en internet, es posible contemplar un enlace a un URL:

§En la Lista de idiomas seleccionar el elemento "English" y pulsar el botón Editar... para abrir la ventana Configurar idioma.

§Pulsar sobre el botón [image] disponible para la opción Enlace para este idioma (muestra la página web en este idioma) y, en la ventana Enlace que se abre, seleccionar la acción Archivo o URL y especificar el URL del sitio web en inglés: por ejemplo, http://www.misitio.es/en/index.html, si se desea publicar el sitio web en inglés en la subcarpeta "en" de la carpeta principal del Servidor.

§Repetir las mismas operaciones también para el sitio web en portugués enlazándolo al URL correspondiente: por ejemplo http://www.misitio.es/pt/index.html, si se desea publicar el sitio web en portugués en la subcarpeta "pt" de la carpeta principal del Servidor.

Una vez hecho todo esto, el sitio web está preparado para ofrecer la elección del idioma pero faltan todavía los contenidos correspondientes de los idiomas inglés y portugués.

§Para avanzar más rápidamente en la creación del sitio en inglés, crear una copia del sitio en español: en la ventana inicial Elección del proyecto seleccionar el proyecto del sitio en español y pulsar en el botón Duplicar. Pulsar a continuación sobre el botón Renombrar para cambiar el nombre del nuevo proyecto por uno más apropiado.

§Abrir la copia del proyecto y en Ajustes generales | General configurar "EN - English" como Idioma de los contenidos: continuar introduciendo las localizaciones para todos los textos y los elementos que dependan del idioma.

§En el Paso 4 - Ajustes avanzados, acceder a la ventana Página de bienvenida y desactivar la opción: Mostrar la página de bienvenida.

§Una vez terminado el proyecto del sitio web en inglés, repetir la misma operación también para configurar el proyecto del sitio web en portugués.

Para la publicación en el Servidor de los sitios web realizados es preciso proceder de la siguiente manera:

§Publicación del sitio en español: el sitio en español es al que está asociada la página de bienvenida y ha sido configurado como "prefedefinido". Procediendo a la publicación se creará un archivo index.html, correspondiente a la página de bienvenida, que se guardará en la carpeta de publicación. Para que haya coherencia con los URL configurados para los sitios en inglés y portugués, es necesario crear en el servidor las subcarpetas previstas: "en" y "pt".

Una vez concluido este paso, el sitio español estará en línea y en la página de bienvenida estarán activos los enlaces en los botones de idioma, que por ahora no conducirán a ninguna página.

§Publicación del sitio web en inglés: para que el enlace que hay en la página de bienvenida al sitio inglés funcione, hay que publicar el proyecto en la subcarpeta "en" que se ha creado.

§Publicación del sitio web en portugués: para que el enlace que hay en la página de bienvenida al sitio portugués funcione, hay que publicar el proyecto en la subcarpeta "pt" que se ha creado.

Una vez publicados los tres sitios en las subcarpetas correspondientes, los botones de la página de bienvenida funcionarán correctamente y permitirán al visitante consultar los contenidos del sitio web en la lengua que prefiera.

Mediante la opción Enlace para este idioma (muestra la página web en este idioma) de la ventana Configurar idioma es posible configurar para las imágenes asociadas a los idiomas (en la mayor parte de los casos, las banderitas) diferentes tipos de acciones. Esto significa que, en lugar de enlazar en ellas un sitio web completo como se ha visto en el ejemplo, se puede enlazar una simple página interna o un mensaje de aviso para explicar que el sitio en un idioma determinado todavía no está disponible pero lo estará lo antes posible, o un documento en PDF con toda la información que se quiere dar para un idioma, o poner en práctica otras soluciones según el caso.
Pulsar para expandir/reducir How To: Cómo crear un sitio multi-idioma a través de los botones en el encabezado de la plantilla

Suponiendo que queremos crear un sitio consultable en español, inglés y portugués, un modo alternativo o complementario a la Página de bienvenida para ofrecer los botones para la elección de la lengua es insertarlos en el encabezado de la plantilla del sitio. Este método ofrece la ventaja de dar al visitante la posibilidad de cambiar de idioma de consulta en cualquier momento y desde cualquier página del sitio web.

§Antes de nada, es necesario crear el sitio web en español definiendo su estructura y sus contenidos en Ajustes generales | General configurar "ES - Spanish" como Idioma de los contenidos.

§Acceder a la ventana Editor de plantilla para poder modificar el encabezado y crear los botones que permitiran al visitante elegir el idioma de consulta.

§Mediante el botón [image] Insertar imagen, importar el archivo gráfico de la imagen de una banderita española: si se quiere crear un botón con efecto de mouseover, usar la opción Archivo de imagen al pasar el ratón para importar una segunda imagen, ligeramente diferente de la primera.

§Repetir esta operación para crear también los botones con las banderas inglesa y portuguesa.

§Seleccionar el botón con la bandera inglesa y pulsar el comando [image] Asociar un enlace: en la ventana Enlace que se abre, seleccionar la acción Archivo o URL y activar la opción Archivo de Internet introduciendo la dirección web en la que se encontrará la página de inicio del sitio web inglés una vez que esté en línea (por ejemplo: http://www.misitio.es/en/index.html).

§Repetir esta misma operación también con el botón para el idioma portugués enlazándolo al URL correspondiente (por ejemplo: http://www.misitio.es/pt/index.html).

Como es lógico, puesto que se está trabajando en el proyecto del sitio web español, no es necesario añadir ningún enlace a la bandera española.

§Para avanzar más rápidamente en la creación del sitio en inglés, crear una copia del sitio en español: en la ventana inicial Elección del proyecto seleccionar el proyecto del sitio en español y pulsar en el botón Duplicar. Pulsar a continuación sobre el botón Renombrar para cambiar el nombre del nuevo proyecto por uno más apropiado.

§Abrir la copia del proyecto y en Ajustes generales | General configurar "EN - English" como Idioma de los contenidos: continuar introduciendo las localizaciones para todos los textos y los elementos que dependan del idioma.

§Acceder a la ventana Editor de plantilla y ajustar los enlaces en los botones de las banderas: asociar al del español el enlace con el URL correspondiente (por ejemplo: http://www.misitio.es/index.html) y quitar el enlace del botón con la bandera inglesa.

§Una vez terminado el proyecto del sitio web en inglés, repetir la misma operación también para configurar el proyecto del sitio web en portugués. En este caso será necesario configurar los enlaces de los botones de los idiomas español e inglés y quitarlo del botón para el idioma portugués.

Para que los botones creados para la elección del idioma funcionen correctamente es necesario que los estilos en los 3 idiomas se publiquen en el servidor respetando las rutas previstas.

§Crear en la carpeta de publicación en el Servidor dos subcarpetas y nombrarlas: "en" y "pt".

§Publicar el proyecto en español (adoptado como proyecto principal) en la carpeta principal del Servidor y los proyectos de los sitios web en inglés y portugués en las carpetas "en" y "pt" respectivamente.

Best practice:

-

Cómo gestionar los Idiomas para los textos añadidos automáticamente.


Cómo gestionar los comentarios desde el Panel de Control en línea.

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea

Best practice > Paso 4 - Ajustes avanzados >

Cómo gestionar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea

 Return to chapter overview
Mostrar/ocultar el texto oculto

Un blog es una especie de diario en red mediante el que es posible publicar artículos de diverso género y dar la posibilidad a los lectores de dejar comentarios. Si la comunidad de los lectores es activa y adecuadamente estimulada por la calidad de los posts, es posible que se desarrollen interesantes discusiones temáticas.

Pulsar para expandir/reducir How To: Cómo configurar la administración de comentarios en WebSite X5

Para dar a los lectores la posibilidad de dejar comentarios a los posts publicados es necesario en primer lugar configurar el blog con las opciones presentes en Blog | Comentarios. En particular, es preciso:

§Activar la opción Permitir la inserción de comentarios para los artículos del blog.

§Especificar la ruta de la Carpeta del servidor con acceso de escritura, es decir la carpeta en la que está habilitada la escritura de archivos por parte del código PHP.

§Decidir si activar el control anti-spam "Captcha" para la publicación de comentarios.

§Especificar el E-mail de destino, o sea la dirección de correo electrónico en la que se desea recibir los correos que son enviados automáticamente para avisar de que un lector ha dejado un nuevo comentario.

§Especificar si los comentarios pueden ser publicados en línea enseguida o si deben ser aprobados antes.

Hecho esto se puede ya proceder a la creación de posts y a la publicación del blog. Al pie de los posts del blog se introducirá automáticamente un formulario mediante el cual los lectores podrán escribir y enviar sus comentarios. Mediante dicho formulario se solicita lo siguiente: Nombre, correo electrónico, sitio web y mensaje. Exceptuando el correspondiente al sitio web, todos los campos son obligatorios.
Pulsar para expandir/reducir How To: Cómo administrar los comentarios mediante el Panel de Control en línea.

Una vez configurada la administración de los comentarios como se indica en el apartado anterior, cuando un lector deje un comentario, se creará automáticamente un email de notificación que será enviado a la dirección de email especificada. Si ha sido activada la opción Visualizar comentarios después de aprobación desde panel de control, para que el comentario sea publicado al fondo del post al que hace referencia, es necesario que antes sea aprobado mediante el comando correspondiente del Panel de Control, que es creado automáticamente por WebSite X5.

El Panel de Control está disponible en el URL http://www.misitio.es/admin, donde http://www.misitio.es es el URL del sitio al que está vinculado el blog, y está disponible para todos los usuarios del grupo Administradores en la sección Gestión de accesos disponible en el Paso 4 - Ajustes avanzados.

En la sección Blog del Panel de control están disponibles dos menús desplegables que presentan la lista de las categorías y las listas de artículos vinculados a ellas. Mediante estos menús, es posible identificar el post del que se desea visualizar los comentarios recibidos. Seguidamente, se presenta la lista de comentarios: para cada comentario se indica el autor, su dirección de correo electrónico, el texto del comentario, la fecha y la hora a la que ha sido enviado. Si la información está disponible, sobre el nombre del autor aparece indicado automáticamente el enlace a su sitio web.

Así pues, para proceder a la moderación de los comentarios es necesario:

§Acceder al Panel de Control en línea y efectuar el acceso, y, después, abrir la sección Blog.

§Identificar el post del que se desean ver los comentarios mediante los menús desplegables que presentan la lista de las categorías disponibles y de los correspondientes posts publicados.

§Deslizar la lista de comentarios recibidos para el post seleccionado y moderar la publicación de los comentarios en el Blog mediante los comandos:

-Eliminar: para eliminar el comentario dejado que, además de no ser publicado en el blog, será borrado también de la lista de comentarios en el Panel de control.

-Aprobar/Rechazar: para aprobar un comentario, y por lo tanto permitir que sea publicado en el blog, o rechazarlo, eliminándolo así de la lista de los post visualizados en el blog. Un comentario rechazado no se borra de las listas del Panel de Control.

Tener la posibilidad de moderar la publicación de los comentarios en el blog es fundamental para protegerse de ataques de spam y para moderar las discusiones eliminando mensajes considerados ofensivos, que no tienen que ver con el tema o que no están en línea con el estilo que se desea mantener.


Cómo definir los contenidos del correo electrónico de confirmación de pedido

Best practice > Paso 4 - Ajustes avanzados > Carrito de la compra >

Cómo definir los contenidos del correo electrónico de confirmación de pedido

 Return to chapter overview

Una vez completado un pedido es importante que el cliente reciba como respuesta un correo electrónico de confirmación gracias al cual puede asegurarse de haber hecho todo correctamente y recibir las indicaciones necesarias para efectuar el pago.

WebSite X5 crea automáticamente el correo electrónico de confirmación del pedido, tomando sólo la información útil, en función de las decisiones del cliente durante el rellenado del pedido.

En particular, el correo electrónico de confirmación del pedido se compone de:

Texto de introducción
Descripción: | Es el texto inicial: debería contener un agradecimiento por la compra efectuada y anticipar los contenidos que seguirán.
Ejemplo: | Estimado cliente, Le agradecemos su compra y le enviamos el resumen de su pedido. A continuación encontrará la lista de productos solicitados, los datos de facturación y las instrucciones sobre el envío y el modo de pago elegidos.
Dónde configurarlo: | En Carrito de la compra | Envío del Pedido, mediante el campo Texto de encabezado.
Datos del usuario
Descripción: | Es la parte en la que se presentan los datos de facturación introducidos por el cliente mediante el formulario de pedido.
Dónde configurarlo: | El formulario de pedido se puede configurar en Carrito de la compra | Detalles del cliente.
Resumen de pedido
Descripción: | Es una tabla en la que se presenta una vista general de todos los productos del pedido: se indica la cantidad y el total parcial por producto además del total del pedido.
Dónde configurarlo: | No hay que configurar nada en particular: la tabla con el resumen se crea automáticamente en función del pedido.
Método de pago
Descripción: | Es necesario que proporcione, en función del método elegido por el cliente, las instrucciones y la información útil para permitirle efectuar el pago.
Ejemplo: | Para el método de pago "Transferencia bancaria": A continuación, los datos necesarios para efectuar el pago mediante transferencia bancaria: XXX YYY ZZZ Le recordamos que una vez efectuado el pago es necesario el envío de una copia del recibo junto al número de pedido.
Dónde configurarlo: | En la sección Mensaje de e-mail de la ventana Tipo de pago.
Método de envío
Descripción | Es aconsejable recordar al usuario el método de envío que ha elegido proporcionándole, si es posible, información sobre plazos y modos de entrega, además de cualquier otra información útil.
Ejemplo: | Para el método de envío "Envío urgente" Envío mediante Envío urgente. La mercancía será entregada en 1-2 días laborables.
Dónde configurarlo: | En la sección Mensaje de e-mail de la ventana Tipo de envío.
Texto de pie de página
Descripción | Es la fórmula de cierre para ofrecer la disponibilidad para preguntas adicionales y despedirse con cortesía, firmando.
Ejemplo: | Estamos a su disposición si necesita más información. Un cordial saludo, el Equipo de Ventas.
Dónde configurarlo: | En Carrito de la compra | Envío del Pedido, mediante el campo Texto de pie de página.

Como sucede con todos los emails creados y enviados automáticamente por el programa, también al email de confirmación de pedido se le aplica el estilo gráfico definido en Estilos y Modelos | E-mail.

El correo electrónico de confirmación de pedido se envía también en formato de texto.

Best practice:

-

Cómo importar/exportar los productos del carrito


Cómo importar/exportar los productos del carrito

Best practice > Paso 4 - Ajustes avanzados > Carrito de la compra >

Cómo importar/exportar los productos del carrito

 Return to chapter overview

Después de haber creado un carrito de la compra de comercio electróncio puede ser útil tener la posibilidad de exportar el catálogo de los productos para poder, por ejemplo, introducirlo de nuevo en otro Proyecto o utilizarlo en otros programas, por ejemplo programas dedicados a la gestión de la facturación. Obviamente, en sentido opuesto, es igualmente importante tener la posibilidad de importar el catálogo de productos para no tener que crearlo desde cero.

En WebSite X5 es posible llevar a cabo estas operaciones de importación y exportación a través de comandos al efecto disponibles en la barra de herramientas de la ventana Carrito de la compra | Productos. La exportación del catálogo de productos produce un archivo en formato .TXT o .CSV que puede ser fácilmente abierto y modificado mediante un editor de texto normal (por ejemplo, el Bloc de Notas de Windows) o Microsoft Excel.

Para modificar manualmente el archivo obtenido por la exportación del catálogo de productos o crear uno nuevo para importarlo, es preciso atenerse a las siguientes reglas:

§La primera línea debe contener el encabezado de los campos y debe presentar los siguientes elementos:

ID;Category;Name/Code;Description;Price;Enable VAT;VAT Value;Weight;Options;Enable Discounts;Discounts

§Eliminar un campo del encabezado equivale a eliminar el dato para todos los productos. Como es lógico, los campos obligatorios Category, Name/Code, Description y Price no se pueden eliminar del encabezado.

§Cada línea que sigue al encabezado debe corresponder a un producto.

§Todos los parámetros se deben indicar separados por el carácter ";".

§Para cada producto se debe indicar obligatoriamente: el nombre de la categoría, el nombre del producto, la descripción del producto y el precio del producto. Todos los demás campos son opcionales y pueden omitirse (simplemente no escribiendo nada entre los caracteres ";" para el campo en cuestión).

§El ID del producto debe ser generado por el programa y no manualmente: si se añade un nuevo producto, es lo correcto dejar vacío el campo del ID.

§Los espacios eventualmente insertados, si son superfluos, serán eliminados automáticamente en la fase de importación.

En particualr, los parámetros existentes en los archivos .TXT o .CSV son:

Parámetro: ID

Obligatorio

No

Descripción

Es un identificador unívoco para el producto

Valor

Es generado y asociado al producto automáticamente por el programa.

En el caso que se desee actualizar un archivo .TXT o .CSV obtenido mediante una exportación anterior, es mejor no modificar los ID ya asignados y dejar vacío el campo para posibles nuevos productos adicionales. También en el caso de que se cree un archivo .TXT o .CSV desde cero, para importar el catálogo en el carrito no hay que crear manualmente los ID de los productos. En efecto, en la fase de importación el programa compara los ID para no tener duplicados y genera los que faltan.

Parámetro: Category

Obligatorio

Sí

Descripción

Es la categoría en la que se incluye el producto.

Valor

Es posible reproducir la ruta de acceso de categorías y sub-categorías utilizando el carácter ">".

Por ejemplo, si el producto es una camiseta que en el catálogo está incluida en la sub-categoría "Informal" de la categoría "Ropa para hombre", en el archivo .TXT o .CSV se puede citar la ruta del siguiente modo:

... ; Ropa para hombre > Informal ; ...

Con este tipo de notación es posible insertar todas las sub-categorías necesarias.

Parámetro: Name/Code

Obligatorio

Sí

Descripción

Es el nombre o el código asignado al producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma del campo Nombre/Código de la ventana Configuración del producto | General.

Parámetro: Description

Obligatorio

Sí

Descripción

Es la descripción asociada al producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma del campo Descripción de la ventana Configuración del producto | General.

Parámetro: Price

Obligatorio

Sí

Descripción

Es el precio asociado al producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma del campo Precio de la ventana Configuración del producto | General.

Parámetro: Enable VAT

Obligatorio

No

Descripción

Indica si para el producto se contempla la aplicación de un IVA especial.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma de la opción IVA (%) de la ventana Configuración del producto | General. Esta opción está disponible solo si en Carrito de la compra | Disponibilidad ha sido elegido el Tipo "IVA incluido en el precio" para la Configuración IVA y sirve para asociar al producto un IVA especial, diferente del de el resto de los productos del catálogo. En estos casos los precios se presentan sin IVA.

Este parámetro puede asumir sólo dos valores: 0 o 1, respectivamente, para los casos en los que no ha sido activada o ha sido activada la opción IVA (%) arriba citada.

Parámetro: VAT Value

Obligatorio

No

Descripción

Es el valor del IVA en el caso en que se contemple la aplicación de un impuesto especial sobre el precio del producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma de la opción IVA (%) de la ventana Configuración del producto | General que, como se ha dicho para el parámetro anterior, está disponible solo si en Carrito de la compra | Disponibilidad ha sido elegido el Tipo "IVA incluido en el precio" para la Configuración IVA.

Si la opción IVA (%) de la ventana Configuración del producto | General es activada pero no se especifica ningún valor, se toma el Valor predeterminado (%) especificado en Configuración del producto | Disponibilidad.

Parámetro: Weight

Obligatorio

No

Descripción

Es el peso del producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma del campo Peso de la ventana Configuración del producto | General.

Parámetro: Options

Obligatorio

No

Descripción

Es la lista de las variantes previstas para el producto.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma del campo Lista de opciones principales de la ventana Configuración del producto | Opciones.

En caso de creación de un archivo .TXT. o .CSV para importar, en cambio, la lista de las variantes del producto puede ser introducida utilizando el carácter "|", de la siguiente manera:

... ; Variante1 |Variante2 | Variante3 ; ....

Con este tipo de notación es posible insertar todas las variantes necesarias.

Parámetro: Enable Discounts

Obligatorio

No

Descripción

Indica si para el producto está previsto un descuento por cantidad.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma de la opción Activar descuento por cantidad de la ventana Configuración del producto | Descuento.

Este parámetro puede asumir sólo dos valores: 0 o 1, respectivamente, para los casos en los que no ha sido activada o ha sido activada la opción Activar descuento por cantidad arriba citada.

Parámetro: Discounts

Obligatorio

No

Descripción

Es la lista de los descuentos por cantidad que se aplican al producto, si se contemplan.

Valor

En caso de exportación del catálogo a .TXT o .CSV, este parámetro se toma, como el anterior, de la opción Activar descuento por cantidad de la ventana Configuración del producto | Descuento.

En cambio, en caso de creación de un archivo .TXT o .CSV a importar, la lista de los descuentos por cantidad que se aplican debe ser escrita respetando la siguiente notación:

... ; cantidad : descuento | cantidad : descuento ; ...

Así, si para pedidos superiores a 20 unidades está previsto un descuento del 10% y para pedidos superiores a 50 unidades está previsto un descuento del 15%, es preciso introducir los datos escribiendo:

... ; 20 : 10 | 50 : 15 ; ...

Utilizando el carácter "|" se pueden introducir todos los descuentos por cantidad necesarios.

Después de haber importado un archivo .TXT o .CSV obtenido de una exportación anterior o creado manualmente, es muy probable que este sea actualizado por el Programa: por ejemplo con el añadido de los ID de producto que falten. Por esta razón, si se desea tener una copia actualizada del archivo .TXT o .CSV, es necesario efectuar una nueva exportación del catálogo de productos.

Best practice:

-

Cómo definir los contenidos del correo electrónico de confirmación de pedido


Los exploradores de internet y el explorador de WebSite X5

Profundización >

Los exploradores de internet y el explorador de WebSite X5

 Return to chapter overview
Mostrar/ocultar el texto oculto

Un explorador es una aplicación de software que permite al usuario visualizar e interaccionar con la información (textos, imágenes, etc.) que hay en una página web. Actualmente, hay disponibles muchos exploradores, de los que los más conocidos y usados son Microsoft Explorer®, Firefox®, Safari® y Google Chrome™.

Para proceder a la visualización de los contenidos Web, los exploradores utilizan un motor de rendering, es decir un programa que, una vez descargado el contenido (por ejemplo una página HTML), da formato a la información relacionada (por ejemplo, los CSS vinculados) y lo muestra en pantalla. Exploradores distintos utilizan motores de rendering distintos y estos últimos se diferencian precisamente por la calidad de la "renderización" respecto a los estándares, y por la velocidad de la misma. El resultado es que una misma página web puede ser mostrada de manera muy distinta según el explorador utilizado. En cualquier caso, teniendo en cuenta que una página web no es una página impresa, un cierto margen de variación es aceptable con tal de que la experiencia de uso del usuario no resulte perjudicada.

El mejor modo para obtener páginas web compatibles con los principales exploradores, en sus distintas versiones, es crear un código lo más limpio y conforme a los estándares que sea posible.

WebSite X5, generando automáticamente código HTML5 con CSS 2.1 o 3 conectados, es capaz de garantizar plena compatibilidad con todos los principales exploradores además de con dispositivos móviles como teléfonos móviles, palmtop y smartphones.

Pulsar para expandir/reducir El explorador interno de WebSite X5

Durante la elaboración de un proyecto es necesario poder verificar cuál será el resultado final y cómo se mostrará el sitio una vez que esté en línea. Para ello, WebSite X5 da la posibilidad de abrir, mediante el botón Vista previa que está siempre disponible (ver El ámbito de trabajo), una vista previa del sitio web localmente, que es permanentemente actualizada (ver Actualizar vista previa mientras se trabaja en el proyecto en la ventana Preferencias).

Para la visualización de la vista previa, WebSite X5 utiliza un explorador interno propio basado en Chromium (http://www.chromium.org/), el explorador de código abierto del que deriva Google Chrome™. Este explorador interno presenta los siguientes comandos:

Atrás

Para volver atrás a la página visitada inmediatamente antes.

Siguiente

Pemite avanzar y abrir de nuevo una pagina ya visitada.

Página de inicio

Para regresar a la Página de Inicio del sitio web.

Barra de direcciones

Indica la ruta de acceso de la página mostrada y/o da la posibilidad de especificar la ruta de la página que se desea visualizar.

Ir

Inicia la carga de la Página a la que se llega mediante la ruta introducida en la barra de direcciones. Como alternativa, se puede confirmar la dirección introducida mediante la tecla ENTER.

Editar esta página

Vuelve al programa, abriendo la página que se está viendo en la vista previa en el explorador directamente en la ventana Creación de la página, permitiendo así su edición. En el caso de páginas pertenecientes al Blog, en el Área Reservada o en el Carrito de la compra, este botón permite volver a la sección correspondiente del Paso 4 Ajustes avanzados.

Es importante tener en cuenta que una vez abierta la ventana del explorador para obtener la vista previa local del proyecto en el que se está trabajando, la página visualizada cambia automáticamente en función de la página en la que se está trabajando. Esto significa que si se pasa a trabajar en una página distinta, esta misma página es abierta también en la vista previa del explorador.

El empleo de un explorador interno para la visualización de la vista previa del sitio web en construcción permite obtener las siguientes ventajas:

§La vista previa no sustituye el sitio web visualizado en la ventana del explorador predeterminado eventualmente abierta,

§La vista previa del sitio web en construcción es actualizada en la ventana del explorador interno y no lleva a la apertura de ventanas o pestañas distintas del explorador predeterminado.


Cómo funciona el Motor de Búsqueda interno de WebSite X5

Profundización >

Cómo funciona el Motor de Búsqueda interno de WebSite X5

 Return to chapter overview
Mostrar/ocultar el texto oculto

WebSite X5 permite añadir dentro del Encabezamiento / Pie de página de la plantilla (ver Editor de plantilla | Insertar campo de búsqueda) un campo para efectuar una búsqueda entre los contenidos del sitio web. Más concretamente, el motor es capaz de abarcar en la búsqueda páginas, imágenes, vídeos, productos del carrito de la compra y blogs: los resultados de la búsqueda, ordenados según su pertinencia, son presentados después en páginas creadas automáticamente por el programa.

Pulsar para expandir/reducir En qué se basa el Motor de Búsqueda

Para aprovechar al máximo el motor de búsqueda interno de WebSite X5 es preciso saber que:

§Páginas

Los elementos de la página tomados en consideración por el motor son: Título, descripción y palabras clave (ver ventana Propiedades de la página |General) además de, como es natural, los contenidos textuales.

§Imágenes / Vídeos

El motor de búsqueda toma en consideración solo las imágenes y los vídeos que han sido añadidos al Mapa del Sitio mediante la opción al efecto (ver Objeto Imagen | SiteMap o Objeto Vídeo/Sonido | SiteMap) y analiza toda la información introducida para este fin: Título, Descripción breve y Posición geográfica (por ejemplo, dirección, ciudad, etc.) para las imágenes; Título, Descripción breve, Categoría, Palabras clave para la búsqueda y Fecha de publicación para los vídeos.

§Productos del carrito de la compra

El motor interno extiende la búsqueda a todos los productos incluidos en el carrito de la compra, analizando su Nombre/Código y la Descripción asociada (ver ventana Configuración del producto | General).

§Blog

Todas las páginas del blog están incluidas en la búsqueda, se analiza: Título, Autor, Categoría, Etiqueta, Descripción breve y Contenido de cada post.

§Área Reservada

Las páginas protegidas con nombre de usuario y contraseña (dentro de un Área Reservada) no son tomadas en consideración por el motor de búsqueda interno si antes el usuario no ha efectuado el acceso.

§Páginas no visibles

Las páginas configuradas como no visibles en el menú de navegación están comprendidas normalmente entre las que el motor de búsqueda interno toma en consideración.

§Para excluir una página de la búsqueda

Para hacer que una página no sea tomada en consideración por el motor de búsqueda interno basta seleccionarla en el Mapa, abrir la ventana Propiedades de la página y, en la sección Avanzado desactivar la opción Agregar esta página al SiteMap.

§Mayúsculas/Minúsculas

El motor de búsqueda no es sensible a la diferencia entre mayúsculas y minúsculas, las considera iguales.

Los diversos parámetros tomados en consideración por el motor de búsqueda interno tienen una relevancia diferente: por ejemplo, las coincidencias encontradas en los títulos de las páginas tienen una gran importancia. Las coincidencias encontradas para algunos parámetros son, por tanto, multiplicadas por un factor de corrección antes de asociarlos a las demás frecuencias.

Después, en función del número de coincidencias así calculado, se define la relevancia, y por lo tanto la posición de cada resultado presentado en la página de resultados de la búsqueda.
Pulsar para expandir/reducir Las páginas con los resultados de la búsqueda

Las páginas con los resultados de la búsqueda son creadas automáticamente por el programa y presentan:

§el campo de búsqueda, ya presente en el encabezamiento o en el pie de página de la plantilla,

§un menú lateral que da la posibilidad de elegir si ver los resultados referidos a las páginas, al blog, a la tienda online, a las imágenes o a los vídeos. Al lado de cada elemento del menú se indica entre paréntesis el número total de resultados de la búsqueda. Si no hay resultados para la búsqueda en una categoría determinada, el elemento correspondiente no aparece en el menú de página.

§la lista de resultados de la búsqueda, ordenados en función de la pertinencia calculada.

Es importante subrayar que en el caso de las páginas con los resultados de la búsqueda de imágenes o vídeos es posible pulsar directamente sobre una imagen o un vídeo para abrirlo directamente dentro de la página del sitio web en el que está incluido.

El motor de búsqueda interno es especialmente útil para los sitios web que ponen a la venta un rico catálogo de productos: las páginas con los resultados de la búsqueda presentan no solo una descripción completa de los productos sino también los botones Comprar para dar la posibilidad a los clientes de hacer un pedido inmediatamente.

Las páginas con los resultados de la búsqueda son creadas automáticamente por el programa: el aspecto gráfico de estas páginas se establece según los ajustes definidos en el Paso 4 - Ajustes avanzados, en la sección Estilos y Modelos y, en lo referido al menú de página, en la sección Estilo de menú de la página.


El Box Model en WebSite X5

Profundización >

El Box Model en WebSite X5

 Return to chapter overview

En WebSite X5 las páginas se crean con ayuda de una rejilla y la maquetación se puede perfeccionar modificando los márgenes de las celdas con las opciones Margen exterior y Margen interior que hay en Estilo de celdas | Estilo.

Para entender mejor qué se entiende por margen y lograr ajustar con precisión la maquetación de los contenidos es necesario comprender el Box Model utilizado.

Cando se escribe el código de una pgina web, todos los elementos HTML son considerados como bloques (o boxes) y a todo el conjunto de reglas que gestionan el aspecto visual de dichos elementos bloque se lo conoce como Box Model. Cada box comprende un cierto número de componentes de base, y cada uno se puede modificar con propiedades de las CSS: márgenes, bordes, espaciados y contenido.

La imagen siguiente ilustra las partes del Box Model:

En WebSite X5 la rejilla de paginación en la que se trabaja identifica una serie de celdas en las que insertar los diferentes contenidos. Para cada celda se aplica el Box Model de la imagen.

Por lo tanto los elementos son:

§Contenido (área en verde): es el contenido añadido mediante el arrastre de uno de los objetos disponibles.

§Margen interno (área de color fucsia): es el espacio entre el contenido actual y el borde.

§Borde: es el borde que rodea el contenido, el aspecto del borde se puede configurar con las opciones de la ventana Estilo de celdas.

§Margen externo (área de color naranja): es el espacio entre el borde y las líneas que definen la Rejilla de paginación.

Teniendo encuenta estas definiciones, el espacio entre dos objetos situados uno junto a otro (en horizontal o en vertical) es igual a la suma de los márgenes externos especificados para las celdas que los contienen.


El Panel de Control en línea

Profundización >

El Panel de Control en línea

 Return to chapter overview

Para cada sitio realizado, WebSite X5 predispone automáticamente un Panel de Control en línea que sirve para permitir al Administrador realizar operaciones como moderar los comentarios dejados por los usuarios en los posts del Blog o los mensajes introducidos en el Libro de Visitas y obtener alguna información de diagnóstico sobre el sitio web.

Al Panel de Control pueden acceder todos los usuarios del grupo Administradores en la sección Gestión de acceso disponible en el Paso 4 - Ajustes avanzados.

Para acceder al Panel de Control basta

§conectarse al URL http://www.misitio.es/admin donde http://www.misitio.es es el URL del sitio web.

§Hecho esto, hay que acceder utilizando las propias credenciales de acceso (nombre de usuario y contraseña).

Una vez se ha accedido, el Panel de Control presenta diferentes secciones:

§Blog: permite moderar los comentarios dejados por los usuarios en respuesta a los posts del Blog vinculado al sitio web (ver Cómo moderar los comentarios del Blog y del Libro de Visitas desde el Panel de Control en línea).

§Libro de Visitas: permite moderar los mensajes dejados por los usuarios en el Libro de Visitas incluido en el sitio web mediante el Objeto Libro de Visitas.

§Prueba WebSite: permite visualizar algunos datos de diagnóstico relativos al sitio web y al Servidor en el que este ha sido publicado. Concretamente los controles efectuados se refieren a:

-Versión de PHP instalada - para que funcione correctamente el envío de emails previsto por el Objeto Formulario de envío e-mail y por el Carrito de la compra, además del acceso a las páginas protegidas mediante nombre de usuario y contraseña, es necesario que el Servidor sea compatible con el lenguaje PHP. Por tanto, se verifica si el Servidor ofrece dicha compatibilidad y, en caso de que así sea, se especifica con qué versión de PHP es compatible.

-Compatibilidad con sesiones - Además de la compatibilidad con PHP, para que el acceso a las Páginas Protegidas se permita solo tras la introducción de las credenciales de acceso correctas, es necesario que el Servidor sea también compatible con las sesiones.

-Carpeta con acceso de escritura - Para poder archivar y moderar los comentarios a los posts del Blog y del Objeto Libro de Visitas es necesario indicar una carpeta en el Servidor para la cual esté permitida la escritura mediante las opciones correspondientes. Se verifica primero que la carpeta con acceso de escritura indicada exista realmente y, en caso de que así sea, que en la carpeta indicada esté permitida la escritura de datos.

-Configuración de MySQL - Al configurar un Objeto Formulario de envío e-mail es posible especificar como método de envío de datos "Enviar los datos a una base de datos" (ver Objeto Formulario de envío e-mail | Enviar): en este caso es preciso proporcionar los parámetros para poderse conectar a la base de datos del Servidor que se utilizará. Así pues, se verifica que el Servidor sea compatible con MySQL y, en caso de que así sea, que los parámetros especificados permitan realmente acceder y operar en la base de datos.


Información y asistencia técnica

Información y asistencia técnica

es un producto Incomedia

www.websitex5.com

www.incomedia.eu

Copyright 2013 Incomedia. Todos los derechos reservados.

WebSite X5 utiliza DotNetZip bajo Licencia Ms-PL (Microsoft Public License)

WebSite X5 utiliza Cef bajo Licencia BSD 3.

WebSite X5 utiliza Cef Sharp bajo Licencia BSD 2.

Para más información y para obtener asistencia técnica visitar la página web: www.websitex5.com/help


Análisis del proyecto

Análisis del proyecto

Enter topic text here.


License BSD 3

License BSD 3

Copyright (c) 2008-2012 Marshall A. Greenblatt. Portions Copyright (c)

2006-2009 Google Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the names of its contributors may be used to endorse

or promote products derived from this software without specific prior

written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


License BSD 2

License BSD 2

Copyright (c) 2012, Anthony Taranto.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the name CefSharp nor the names of its contributors

may be used to endorse or promote products derived from this software

without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Microsoft Public License (Ms-PL)

Microsoft Public License (Ms-PL)

 Return to chapter overview

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms "reproduce," "reproduction," "derivative works," and "distribution" have the same meaning here as under U.S. copyright law.

A "contribution" is the original software, or any additions or changes to the software.

A "contributor" is any person that distributes its contribution under this license.

"Licensed patents" are a contributor's patent claims that read directly on its contribution.

2. Grant of Rights

(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create.

(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software.

3. Conditions and Limitations

(A) No Trademark License- This license does not grant you rights to use any contributors' name, logo, or trademarks.

(B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically.

(C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license.

(E) The software is licensed "as-is." You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.


print_copyright

print_copyright

© Copyright 2013 Incomedia. Todos los derechos reservados.

La información contenida en este manual puede estar sujeta a modificaciones sin aviso previo. Ninguna parte de este manual puede ser reproducida o transmitida en ningún formato ni con ningún medio, electrónico o mecánico, para ningún fin sin el consentimiento expreso por escrito de Incomedia.

Se recuerda al usuario que los vídeos, sonidos o imágenes que desee utilizar en los proyectos pueden estar sujetos a derechos de autor. La inclusión no autorizada de tales materiales podría por tanto suponer una violación de derechos de autor, por lo que es recomendable asegurarse de poder usarlos libremente u obtener los permisos necesarios de los respectivos autores o de los entes competentes.

Incomedia, WebSite X5 y WebSite X5 Evolution son marcar registradas de Incomedia s.r.l. Otras marcas o nombres de productos citados en este documento son marcas o marcas registradas de los respectivos propietarios.

Escrito y maquetado por Incomedia s.r.l.